控制div样式

今天偶然间看到了一个控制div属性的小示例，

上代码

 

<!DOCTYPE html>
<html>
<head>
    <title>控制div属性</title>
    <style type="text/css">
        .box{
            width: 500px;
            margin: 0 auto;
            text-align: center;
        }
        #div{
            width: 100px;
            height: 100px;
            background-color: #000;
            margin: 10px auto;
            display: block;
        }
    </style>
    <script type="text/javascript">
        window.onload=function(){
            var input = document.getElementsByTagName("input");
            var div = document.getElementById("div");

            var attrName = ["width","height","background-color","display","display"];
            var attrVal = ["200px","200px","red","none","block"];

            for(var i=0;i<input.length;i++){
                input[i].index = i;
                input[i].onclick = function(){
                    this.index == input.length-1 && (div.style.cssText = "");
                    div.style[attrName[this.index]] = attrVal[this.index];
                }
            }
        };
    </script>
</head>
<body>
    <div class="box">
        <input type="button" value="变宽">
        <input type="button" value="变高">
        <input type="button" value="变色">
        <input type="button" value="隐藏">
        <input type="button" value="重置">
        <div id="div"></div>
    </div>
</body>
</html>

 

一开始是很奇怪，display:block;能控制按钮重置？！

后来发现，原来真正能使按钮重置样式的是这一行

this.index == input.length-1 && (div.style.cssText = "");

 

这行代码的意思，this代表的是你点击的按钮，前边也有给按钮的index赋值；当this.index等于input.length-1（也就是说你点击的是最后一个“重置”按钮）时，会执行div.style.cssText = "";

div.style.cssText = ""；指的是清除div元素的所有行内样式；所以会达到重置的效果。

 

posted @ 2017-08-21 15:19  随风而逝XXX  Views(242)  Comments(0)  Edit  收藏  举报