console 命令行工具 X clear

console

window.onload = function () 
{
    var oBtn = document.getElementById("btn");
    var oBox = document.getElementById("box");

    oBtn.onclick = function () {
        console.log("line 7: " + getComputedStyle(oBox).backgroundColor);
        console.log("line 8: " + getComputedStyle(oBox)["backgroundColor"]);
    }
    //设置颜色
    var oBtn1 = document.getElementById("btn1");
    var oBox1 = document.getElementById("box1");

    oBtn1.onclick = function () {
       oBox1.style.backgroundColor = "lightskyblue";
       oBox1.style.border="2px soild black";
    }

    //设置指定属性
    var oBtn2 = document.getElementById("btn2");
    var oBox2 = document.getElementById("box2");

    oBtn2.onclick = function () {
        var attr = document.getElementById("attr").value;
        var val = document.getElementById("val").value;

        oBox2.style[attr]= val;
    }

    //设置cssText属性
    var oBtn3 = document.getElementById("btn3");
    var oBox3 = document.getElementById("box3");

    oBtn3.onclick = function () {
        var val = document.getElementById("cssTextVal").value;

        oBox3.style.cssText= val;
    }

    //切换样式
    var oBtn4 = document.getElementById("btn4");
    var oBox4 = document.getElementById("box4");

    oBtn4.onclick = function () {
        oBox4.setAttribute("class", "newBox");
    }

    //获取样式属性
    var oBtn5 = document.getElementById("btn5");
    var oBtn6 = document.getElementById("btn6");

     oBtn5.onclick = function () {
         console.log("line 52: " + oBox3.style.width);
         console.log("line 56: " + getComputedStyle(oBox3).width);
    }

     oBtn6.onclick = function () {
         console.log("line 57: " + oBox4.style.width);
         console.log("line 58: " + getComputedStyle(oBox4).width);
    }
    //getComputedStyle和oBox4.style.width区别
    //getComputedStyle（常用）只能拿三个部分计算后的属性
    //oBox4.style.width只拿写在style里面的属性
}

</head>
<body>
    <div>
        <button id="btn">获取颜色</button>
        <div id="box"></div>
    </div>
    <br/>

    <div>
        <button id="btn1" style="background-color: lightskyblue">设置颜色</button>
        <div id="box1"></div>
    </div>
    <br/>
    <div>
        <label>属性：</label>
        <input id = "attr" type="text"></input>
        <br/>
        <label>取值：</label>
        <input id = "val" type="text"></input>
        <br/>
        <button id="btn2">设置指定属性</button>
        <div id="box2"></div>
    </div>
    <br/>
    <div>
        <label>cssText属性：</label>
        <input id = "cssTextVal" type="text"></input>
        <br/>
        <button id="btn3">设置cssText属性</button>
        <div id="box3"></div>
        <button id="btn5">获取宽度</button>
    </div>
    <br/>
    <br/>
    <div>
        <button id="btn4">切换样式</button>
        <div id="box4" class="oldBox"></div>
         <button id="btn6">获取宽度</button>
    </div>
    <br/>
</body>
</html>

#box{
    width:100px;
    height:100px;
    background-color:rgb(243, 190, 217);
}

#box1{
    width:100px;
    height:100px;
    background-color:rgb(171, 209, 191);
}

#box2{
    width:100px;
    height:100px;
    background-color:rgb(245, 246, 153);
}

#box3{
    width:100px;
    height:100px;
    background-color:rgb(182, 100, 100);
}

.oldBox{
    width:100px;
    height:100px;
    background-color:rgb(180, 158, 200);
}

.newBox{
    width:50px;
    height:50px;
    background-color:rgb(240, 153, 121);
    border: 2px solid;
}