HTMLDOM-样式控制

<html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>控制样式</title> 
<style>
    .d1{
        border: 1px solid green;
        width: 100px;
        height: 100px;
    }

    .d2{
        border:  2px solid yellowgreen;
        width: 200px;
        height: 200px;
    }
</style>
div 
<div id="div2">
    div2
</div>
<script>
    var div1 = document.getElementById("div1");
    div1.onclick = function(){
        // 修改演样式1
        div1.style.border = "1px solid red";
        div1.style.width = "200px";

        div1.style.fontSize ="30px";
    }

    var div2 = document.getElementById("div2");
    div2.onclick = function(){
        div2.className = "d2"
    }


</script>
posted @ 2021-02-26 17:09  withLevi  阅读(52)  评论(0)  编辑  收藏  举报