摘要：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>DOM控制样式</title><style type="text/css">div{width: 500px;height: 500px;border: 10px
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM控制样式</title>
<style type="text/css">
div{
width: 500px;
height: 500px;
border: 10px solid #ccc;
border-radius: 15px;
margin:0 auto;
}
#box{
width: 100px;
height: 100px;
margin-top: 30px;
text-align: center;
background: orange;
}
p{
text-align: center;
}
</style>
</head>
<body>
<div>
<div id="box">点击对应的按钮改变样式</div>
<p>
<button onclick="height()">高度</button>
<button onclick="wd()">宽度</button>
<button onclick="bg()">背景</button>
<button onclick=" cz()">重置</button>
<button onclick="hd()">隐藏</button>
<button onclick="show()">显示</button>
</p>
</div>
<script type="text/javascript">
var box;
window.onload=function(){
box=document.getElementById('box');
}
function height(){
box.style.height="200px";
}
function wd(){
box.style.width="200px";
}
function bg(){
box.style.backgroundColor="red";
}
function cz(){
box.style.height="100px";
box.style.width="100px";
box.style.backgroundColor="orange";
box.style.borderRadius="15px"
}
function hd(){
box.style.display="none";
}
function show(){
box.style.display="block";
}
</script>
</body>
</html>
首先获取元素节点，然后创建事件函数，通过事件函数去改变相应样式
批改老师：天蓬老师批改时间：2018-12-31 16:02:22
老师总结：style属性其实也是一个对象, 里面的属性其实就是一个简单的字符串,这一计算属性是有区别的,要注意
