控制div属性

最新推荐文章于 2021-06-18 14:14:01 发布

hlinghoney

最新推荐文章于 2021-06-18 14:14:01 发布

阅读量717

点赞数

分类专栏： web前端开发

本文链接：https://blog.csdn.net/hlinghling/article/details/51228300

版权

web前端开发专栏收录该内容

35 篇文章 0 订阅

订阅专栏

坚持每天写demo系列

控制div属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>lesson1-index1控制div属性</title>
    <style>
        #outer{
            width: 500px;
            margin: 0 auto;
            padding: 0;
            text-align: center;
        }
        #div1{
            width:  100px;
            height: 100px;
            background-color: #010101;
            margin: 10px auto;
            display: block;
        }
    </style>
    <script>
        var changeStyle=function(elem,attr,value){
            elem.style[attr]=value;
            //元素elem的属性attr的样式style的取值为value
        };

        window.onload= function () {
            //定义oBtn，通过input标签名查找元素
            var oBtn=document.getElementsByTagName("input");
            //定义oDiv，通过id为div1查找元素
            var oDiv=document.getElementById("div1");
            //定义oAtt，属性格式如下，定义oVal，对应属性的取值（对应于变宽、变高、改变颜色、隐藏、重置）
            var oAtt=["width","height","background-color","display","display"];
            var oVal=["200px","200px","red","none","block"];

            for(var i=0;i<oBtn.length;i++){
                //optionObject.index,index 属性可返回下拉列表中选项的索引位置。
                oBtn[i].index=i;
                oBtn[i].onclick= function () {
                    //这里的this代表当前的btn，当this.index等于4时，后面的oDiv.style.cssText = ""这句会执行
                    //cssText 的本质就是设置 HTML 元素的 style 属性值,此句相当于初始化oDiv.style
                    if(this.index==oBtn.length-1){
                        oDiv.style.cssText="";
                    }
                    //this.index==oBtn.length-1&&(oDiv.style.cssText="");
                    //改变样式，oDiv的属性oAtt[this.index]样式改为oVal[this.index]
                    changeStyle(oDiv,oAtt[this.index],oVal[this.index]);
                }

            }
        };
    </script>
</head>
<body>
    <div id="outer">
        <input type="button" value="变宽"/>
        <input type="button" value="变高"/>
        <input type="button" value="变色"/>
        <input type="button" value="隐藏"/>
        <input type="button" value="重置"/>
    </div>
    <div id="div1"></div>

</body>
</html>

hlinghoney

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
控制div属性

坚持每天写demo系列控制div属性<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>lesson1-index1控制div属性</title> <style> #outer{ width: 500px; margin: 0
复制链接

扫一扫

专栏目录