js练习-控制div属性

Posted 2020-06-28

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js练习-控制div属性相关的知识，希望对你有一定的参考价值。

要开始练练js了，决定先按照Ferris大大的索引表一个个练，头一个就是控制div属性啦。看似挺简单的，不过平时jquery用惯了，用起来原生js还有点手生呢。

总之就是模仿加练习啦，先看看效果：

技术分享

一、结构就是这样啦：（就是喜欢用a标签，任性。）

<div id="smallBox01">
    <a href="#" class="button01">变宽</a>
    <a href="#" class="button01">变高</a>
    <a href="#" class="button01">变色</a>
    <a href="#" class="button01">隐藏</a>
    <a href="#" class="button01">重置</a>
</div>
<div id="changeBox01"></div>

二、样式呢

#changeBox01{height: 100px;width: 100px;background-color:#77948d;}

原先盒子的宽高，背景色（其他都不是重点啦）

三、js实现

window.onload=function(){
    practice01();
};
var practice01=function(){
    //取到按钮的父元素
    var oControl=document.getElementById(‘smallBox01‘);
    //取到每一个a标签
    var oBtn=oControl.getElementsByTagName(‘a‘);
    // 取到要改变的盒子
    var oDiv=document.getElementById(‘changeBox01‘);
    //建立一个二维数组存放分别每个按钮要改变的样式和样式值
    var oAtt=[["width","200px"],["height","200px"],["background","#6E5794"],["display","none"],["display","block"]];
    //创建改变样式的值
    function changeStyle(elem,attr,value){
        elem.style[attr]=value;
    }
    //遍历a标签
    for (var i = 0; i < oBtn.length; i++) {
        //设置对应的index
        oBtn[i].index=i;
        //绑定点击事件
        oBtn[i].onclick=function(){
            //重置按钮，清空之前的样式
            this.index==oBtn.length-1 &&(oDiv.style.cssText="");
            //改变对应的样式
            changeStyle(oDiv,oAtt[this.index][0],oAtt[this.index][1]);
        };
    }
};