oDiv.style.cssText="width:100px;height:200px;";是前面的升级版(oDiv.style.width=‘200px’;)

<style>
div { width:100px; height:100px; border:1px solid #333; }
</style>
 
</head>
 
<body>
 
<div id="div1">123</div>
 
<input id="btn1" type="button" value="按钮" />
 
<script>
var oDiv = document.getElementById('div1');
var oBtn = document.getElementById('btn1');
 
oDiv.onclick = function (){
// oDiv.style.width = '200px';
oDiv.style.cssText = ' width:200px; height:200px; ';

//并不是要修改之前的css样式,而是这个是style.内嵌的,优先级更高点而已
};
oBtn.onclick = function (){
// oDiv.style.width = '100px';

//此时是是吧上面的oDiv.style.cssText = ' width:200px; height:200px; ';
//完全替换了,类似理解innerHTML一样。
oDiv.style.cssText = '';
};再次清空的时候不会改变css里面的样式
 
</script>
 

05-18 09:26