3.控制面板操作其他标签进行变化

1.首先制作自己想要的HTML页面

我的页面设计为这样,具体功能为操作右边的控制面板来变化左边的div,要求右边控制面板开始为隐藏状态.

html代码如下:

 <div class="box">
        <strong>请为下面的div设定样式:</strong> <button>点击设置</button>
        <div></div>
    </div>

    <div class="mask">
        <div>
            请选择背景色: <button name="bgColor">红</button> <button name="bgColor">黄</button> <button name="bgColor">蓝</button> <br>
            请选择宽度(px): <button name="width">200</button> <button name="width">300</button> <button name="width">400</button> <br>
            请选择高度(px): <button name="height">250</button> <button name="height">350</button> <button name="height">450</button> <br>
            <button name="reset">恢复</button>
            <button name="true">确定</button>
        </div>
    </div>

---

2. css修饰页面成为想要的样子

css代码如下:

  <style>
        .box > div {
            width: 100px;
            height: 100px;
            border: 3px solid #000;
        }

        .mask{
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            position: fixed;
            top:0;
            left:0;

        }

        .mask{
            display: none;
        }

        .mask > div{
            padding: 20px;
            background: #fff;
            position: absolute;
            right: 20px;
            bottom:30px;
        }
    </style>

---

3.在script里面进行操作

先获取标签对象

点击设置button标签对象
        var oBtnSet = document.querySelector('[name="set"]');
恢复button标签
        var oBtnReset = document.querySelector('[name="reset"]');
确定button标签
        var oBtnTrue = document.querySelector('[name="true"]');
div标签对象
        var oContent = document.querySelector('.content');
遮盖层div标签对象
        var oMask = document.querySelector('.mask');

获取背景颜色设定button标签 获取的是 伪数组
伪数组中有3个设定背景颜色的button标签
每一个button标签对应一个要设定的背景颜色
        var oBGC =  oMask.querySelectorAll('div p:nth-child(1) button');
        console.log(  oBGC );(此处输出来验证上面代码是否正确)

设定一个背景颜色的数组 数组的内容就是 标签要设定的背景颜色
数组设定的背景颜色单词 和 伪数组中的button标签 是 一一对应的关系
        var colorArr = ['red' , 'pink' , 'blue'] ;
        console.log(  colorArr );


设定背景颜色方法2
    通过 循环遍历 给 每一个 button标签 添加点击事件
    通过循环遍历 绑定事件时 循环变量的声明 
    必须是 let 关键词 不能是 var 关键词

        for( let i = 0 ; i <= oBGC.length-1 ; i++ ){

    i 是 伪数组的索引下标 
    oBGC[i]是伪数组数据单元存储的数据数值也就是button标签
    给oBGC[i]也就是button标签通过循环遍历添加点击事件 
    oBGC[i] 获取的button标签 和 colorArr[i] 获取的 颜色单词 是 一一对应的

        oBGC[i].addEventListener( 'click' , function(){

    点击时设定的颜色是颜色数组中获取的颜色单词
    颜色单词和button标签是一一对应的关系 
    也就是索引下标是相同的 
    循环中i的数值是button标签的索引下标 
    即颜色数组中对应颜色单词的索引下标 
        oContent.style.background = colorArr[i];
        })
        }



        oBGC.forEach( function( item , index ){
            // 参数1 存储数组单元的数据数值 也就是 button标签
            // 参数2 存储数组单元的索引下标 也就是 0 1 2 

            // 给button标签添加点击事件 也就是 给 item 添加点击事件
            item.addEventListener('click' , function(){
                // 使用 索引下标 index 从 颜色数组中 获取对应的 颜色单词
                oContent.style.background = colorArr[index];
            })
        })


    点击设置button标签 点击事件
    点击时让遮盖层div的display的css样式设定为 block

        oBtnSet.addEventListener( 'click' , function(){
            oMask.style.display = 'block' ;
        })

    确定button标签 点击事件
    点击时让遮盖层div的display的css样式设定为 none

        oBtnTrue.addEventListener( 'click' , function(){
            oMask.style.display = 'none' ;
        })

    恢复button标签 点击事件
    点击时 让 content div标签 获取原始的css样式设定

        oBtnReset.addEventListener( 'click' , function(){

    设置 content div标签

            oContent.style.width = '100px';
            oContent.style.height = '100px';
            oContent.style.background = 'transparent';
        })


    设定背景颜色方法
    给每一个 button标签 添加 点击事件

        oBGCRed.addEventListener( 'click' , function(){
        oContent.style.background = 'red';
        })
        oBGCYellow.addEventListener( 'click' , function(){
        oContent.style.background = 'yellow';
        })
        oBGCBlue.addEventListener( 'click' , function(){
        oContent.style.background = 'blue';
        })