JavaScript HTML DOM ：控制元素的样式

最新推荐文章于 2024-01-19 08:44:45 发布

_七七

最新推荐文章于 2024-01-19 08:44:45 发布

阅读量421

点赞数

文章标签： js javascript

本文链接：https://blog.csdn.net/qq_43472877/article/details/105655410

版权

控制元素样式

1.使用元素的style属性来设置样式

<body>
    <div id="div1">
        div
    </div>

    <script>
        var div1 = document.getElementById("div1");
        div1.onclick = function(){
            //修改样式方式1
            div1.style.border = "1px solid red";
            div1.style.height = "200px";
            div1.style.width = "200px";

            //font-size --> fontSize
            div1.style.fontSize = "100px";
        }

    </script>

</body>

2.提前定义好类选择器class的样式，使用元素的className属性来设置元素class的属性值

    <style>
        .d1{
            border: 1px solid red;
            width: 100px;
            height: 100px;
        }
        .d2{
            border: 1px solid blue;
            width: 200px;
            height: 200px;
        }

    </style>

<body>

    <div id="div2">
        div2
    </div>

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

    </script>

</body>

_七七

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript HTML DOM ：控制元素的样式

控制元素样式1.使用元素的style属性来设置样式<body> <div id="div1"> div </div> <script> var div1 = document.getElementById("div1"); div1.onclick = function...
复制链接

扫一扫