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

//设置单个属性
    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 oBtn5=document.getElementById('btn5');
    oBtn5.onclick=function(){
        //内联样式
        console.log('line 49:'+oBox3.style.width);
        //Css样式
        console.log('line 50:'+getComputedStyle(oBox3).width);
    }

    var oBtn6=document.getElementById('btn6');
    oBtn6.onclick=function(){
        //内联样式
        console.log('line 57:'+oBox4.style.width);
        //Css样式
        console.log('line 59:'+getComputedStyle(oBox4).width);
    }

} 
//三种CSS样式  优先级  style只能获取行内样式，不能获取内部和外部
//访问用CSS样式

<!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>

    <div>
        <button id="btn1">获取颜色</button>
        <div id="box1"></div>
    </div>

    <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/>
    
    <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:hotpink;
}

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

#box2{
    width:100px;
    height:100px;
    background-color:rgb(58, 209, 78);
}

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

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

.newBox{
    width:50px;
    height:50px;
    background-color:coral;
}