摘要：<!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">點(diǎn)擊對(duì)應(yīng)的按鈕改變樣式</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>
首先獲取元素節(jié)點(diǎn)，然后創(chuàng)建事件函數(shù)，通過事件函數(shù)去改變相應(yīng)樣式
批改老師：天蓬老師批改時(shí)間：2018-12-31 16:02:22
老師總結(jié)：style屬性其實(shí)也是一個(gè)對(duì)象, 里面的屬性其實(shí)就是一個(gè)簡(jiǎn)單的字符串,這一計(jì)算屬性是有區(qū)別的,要注意