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";
    }

    //设置指定属性
    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("cssTextValue").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);
    }
}

<!DOCTYPE html> 
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            
        </style>
        <script>
        
        </script>
    </head>
    <body>
        <table>
            <caption>考试成绩表</caption>
            <tr>
                <td>小明</td>
                <td>80</td>
                <td>80</td>
                <td>80</td>
            </tr>
            <tr>
                <td>小红</td>
                <td>90</td>
                <td>90</td>
                <td>90</td>
            </tr>
            <tr>
                <td>小杰</td>
                <td>100</td>
                <td>100</td>
                <td>100</td>
            </tr>
        </table>

        <ul id="list">
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
            <li>jQuery</li>
            <li>Vue.js</li>
        </ul>
        <button id="btn">删除</button>
    </body>
</html>

#box{
    width:100px;
    height:100px;
    background-color:hotpink;
}

#box1{
    width:100px;
    height:100px;
    background-color:aquamarine;
}

#box2{
    width:100px;
    height:100px;
    background-color:rgb(208, 127, 255);
}


#box3{
    width:100px;
    height:100px;
    background-color:darkorange;
}

.oldBox{
    width:100px;
    height:100px;
    background-color:royalblue;
}

.newBox{
    width:50px;
    height:50px;
    background-color:lightskyblue;
    border:2px solid black;
}