样式更改 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        div{
            width:300px;
            height: 300px;
            background-color: #333;
        }
        .box{
            width:500px;
            height: 500px;
            background-color: #ccc;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <script type="text/javascript">
        // var oDiv=document.getElementById('box');
        // oDiv.onclick=function(){
        //     this.style.width='400px';
        //     this.style.height='400px';
        //     this.style.backgroundColor='#ccc';
        // }

        //第一种方法

        // var oDiv=document.getElementById('box');
        // oDiv.onclick=function(){
        //     this.style.cssText='width:500px; height:500px; background-color:#ccc;';
        // }


        //第二种方法


        // var oBox=document.getElementById('box');
        // oBox.onclick=function(){
        //     with(oBox.style){
        //         width=500+'px';
        //         height=100+'px';
        //         backgroundColor='#ccc';
        //     }
        // }

    //第三种方法
        var oDiv=document.getElementById('box');
        oDiv.onclick=function(){
            oDiv.className='box';
        }
    //第四种方法


    </script>
    
</body>
</html>

 

posted @ 2017-05-08 18:54  Jinsuo  阅读(161)  评论(0)    收藏  举报