点击后变换宽高等样式

139 阅读1分钟

<style type="text/css">

          div{
            width:100px;
            height:100px;
            background-color:tomato;
           }
       
        .active{
            width:100px;
            height:100px;
            background-color:skyblue;
        } 

</style>

</head>

<body>

<div></div>

<script type="text/javascript">

var div = document.getElementsByTagName("div")[0];
div.onclick = function(){
    // 2.4.1
    div.style.width = "200px";
    div.style.height ="200px";
    div.style.backgroundColor="green";

    // 2.4.2改变class
    div.className="active";
}

</script>

</body>

</html>

3.4-06-21 225819.jpg

3.4-06-21 225854.jpg