JS控制DIY样式学习总结
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style media="screen">
.center{padding-top: 20px;text-align: center;}
input{width: 50px;height: 25px;background: rgb(0,0,0,0);}
#box{width: 100px;height: 100px;background:#2E6CD6;margin: 0 auto;margin-top: 50px;}
</style>
</head>
<body>
<div>
<input type="button" value="变宽" onclick="Owidth()"> <!-- 当用户点击按钮触发事件函数 -->
<input type="button" value="变高" onclick="Oheight()">
<input type="button" value="变色" onclick="Obgcolor()">
<input type="button" value="变圆" onclick="Oradius()">
<input type="button" value="隐身" onclick="Onone()">
<input type="button" value="显示" onclick="Oblock()">
<input type="button" value="重置" onclick="Orest()">
<div id="box"></div>
</div>
<script type="text/javascript">
var box;
window.onload = function (){ //window.onload 事件加载完后触发，这应该算是为全局函数了吧！
box = document.getElementById('box');//获取页面中的 DOM元素
}
function Owidth(){ //声明一个函数名 Owidth ，然后通过全局函数获取到的DOM元素修改其CSS样式
box.style.width = "400px"//请教下老师，“400px”后面要加分号吗？加到“”里面结果效果出不来。
}
function Oheight(){
box.style.height = "400px"
}
function Obgcolor(){
box.style.background = "#AD05FF"
}
function Oradius(){
box.style.borderRadius = "50%"
}
function Onone(){
box.style.display = "none"
}
function Oblock(){
box.style.display = "block"
}
function Orest(){//重置
box.style.width = "100px"
box.style.height = "100px"
box.style.background = "#2E6CD6"
box.style.borderRadius = "0"
}
</script>
</body>
</html>老师看下我注释中的理解是否有误，请您指点，辛苦了您！