cssText

我不是女神ヾ 2022-12-26 07:30 113阅读 0赞

[cssText的用法以及特点][cssText]

<title>控制div属性</title>
    <style>
    #outer{ width:500px;margin:0 auto;padding:0;text-align:center;}
    #div1{ width:100px;height:100px;background:black;margin:10px auto;display:block;}
    </style>
    <script>
    var changeStyle = function(elem, attr, value) { 
    	elem.style[attr] = value
    };
    window.onload = function() { 
    	var oBtn = document.getElementsByTagName("input");
    	var oDiv = document.getElementById("div1");
    	var oAtt = ["width", "height", "background", "display", "display"];
    	var oVal = ["200px", "200px", "red", "none", "block"];
    	for (var i = 0; i < oBtn.length; i++) { 
    		oBtn[i].index = i;
    		oBtn[i].onclick = function() { 
    			this.index == oBtn.length - 1 && (oDiv.style.cssText = "");
    			changeStyle(oDiv, oAtt[this.index], oVal[this.index])
    		}
    	}
    };
    </script>
    <div id="outer">
    	<input type="button" value="变宽" />
    	<input type="button" value="变高" />
    	<input type="button" value="变色" />
    	<input type="button" value="隐藏" />
    	<input type="button" value="重置" />
    	<div id="div1"></div>
    </div>

[cssText]: https://www.cnblogs.com/majingyi/p/6840818.html

cssText

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 cssText

相关 js中cssText批量修改元素样式