dom03-获取设置样式案例

day03-20，21，22
获取样式属性的时候注意点：
①style属性对应的是标签的style属性
②style对象中的样式属性 对应的是 行内的样式属性
③通过style对象中的属性获取到的值 只有当前样式属性的值的部分。
设置样式属性的时候注意点：
①设置值的时候是字符串 有单位 注意命名 而且只要这个属性的值
②通过style设置的都是行内样式
案例：开关灯

<script>
    //点击按钮实现开灯关灯的切换
    var isOpen=true;
    var btn=document.getElementById('btn');
    btn.onclick=function (){
     //console.dir(document.body);
     if (isOpen) {
        document.body.style.backgroundColor="black";//此处是赋值
        this.value="开灯";
        isOpen=false;
    }else{
        document.body.style.backgroundColor="pink";//此处是赋值
        this.value="关灯";
        isOpen=true;
        };
    }

    </script>

案例练习：
1，改变盒子的大小

<script>
    var ret=true;
    var btn=document.getElementById('btn');
    var box=document.getElementById('box');
    btn.onclick=function(){
        if (ret) {
            box.style.width="400px";
            box.style.height="400px";
            this.value="还原";
            ret=false;
        }else{
            box.style.width="200px";
            box.style.height="200px";
            this.value="设置";
            ret=true;
        };
    }
    </script>

案例练习：
2，切换背景图

<script>
    var box=document.getElementById('box');
    box.onmouseover=function(){
        this.style.backgroundImage="url(images/3.jpg)";
    };
    box.onmouseout=function(){
        this.style.backgroundImage="url(images/1.jpg)";
    };
    </script>

案例练习：
3，百度换肤
百度换肤案例样式

*{
        margin: 0;
        padding: 0;
    }
    body{
        background-image: url(images/1.jpg);
    }
    #mask{
        background-color: rgba(255,255,255,0.3);
        height: 200px;
        text-align: center;
    }
    #mask img{
        width: 200px;
        height: 150px;
        margin-top: 35px;
        cursor: pointer;
    } */

<script>
    var  mask=document.getElementById('mask');
    var imgs=mask.children;
    for (var i = 0; i < imgs.length; i++) {
        imgs[i].onclick=function(){
            document.body.style.backgroundImage="url("+this.src+")";
        }
    };
    </script>