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;
        console.log(attr);
        var val=document.getElementById("val").value;
        console.log(val);

        obox2.style[attr]=val;
    }

    var obtn3=document.getElementById("btn3");
    var obox3=document.getElementById("box3");

    obtn3.onclick=function(){
        var val=document.getElementById("cssTextVal").value;
        console.log(val);

        obox3.style.cssText=val;
    }

    var obtn4=document.getElementById("btn4");
    var obox4=document.getElementById("box4");

    obtn4.onclick=function(){
        //obox4.className="newbox";
        obox4.setAttribute("class","newbox");
    }

        var otds=document.getElementsByTagName("td");

    for(var i=0;i<otds.length;++i){
        otds[i].onclick=function(){
            var oparent=this.parentNode;
            oparent.style.color="white";
            oparent.style.backgroundColor="lightskyblue";
        }
    }

    var oul=document.getElementById("list");
    var ochildnodes=oul.childNodes;
    var ochildelements=oul.children;

    var obtn=document.getElementById("btn");

    obtn.onclick=function(){
        //oul.removeChild(oul.lastElementChild);

        //var prelastelement=oul.lastElementChild.previousElementSibling;
        //oul.removeChild(prelastelement);

        var prelastnode=oul.lastElementChild.previousSibling;
        oul.removeChild(prelastnode);
    }

    //var odiv=document.createElement("div");
    //var op=document.createElement("p");
    //var otext=document.createTextNode("hi hi");
    //op.appendChild(otext);
    //odiv.appendChild(op);

    //document.body.appendChild(odiv);

    //var odiv1=document.createElement("div");
    //odiv1.innerHTML="<p>hi,innerhtml</p><p> second html</p>";
    //document.body.appendChild(odiv1);

    //console.log("odiv s innertext： "+odiv.innerText);
    //console.log("odiv1 s innertext： "+odiv.innerText);

    //document.body.innerHTML="<div><p>hi</p><p>second</p></div>"
}

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">   
    </style>
    <script>
       
    </script>
</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> 
    </div>
    </br>

    <div>
        <button id="btn4">切换样式</button>
        <div id="box4" class="oldbox"></div> 
    </div>
    </br>

 <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:rgba(226, 116, 27, 0.719);
}
#box2{
    width:100px;
    height:100px;
    background-color:rgba(26, 214, 189, 0.719);
}
#box3{
    width:100px;
    height:100px;
    background-color:rgba(214, 26, 51, 0.719);
}
.oldbox{
    width:100px;
    height:100px;
    background-color:rgba(223, 57, 148, 0.719);
}
.newbox{
    width:50px;
    height:50px;
    background-color:rgba(57, 190, 223, 0.719);
}


table{
    border-collapse:collapse;
}
table,tr,td{
    border:1px solid gray;
}