2022/1/11，使用DOM操作CSS

最新推荐文章于 2024-05-13 11:14:05 发布

weixin_44645655

最新推荐文章于 2024-05-13 11:14:05 发布

阅读量41

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44645655/article/details/122442813

版权

javascript 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

2022/1/11，使用DOM操作CSS

<!DOCTYPE html>
<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>使用DOM操作CSS</title>

    <style type="text/css">
        #box1 {
            width: 200px;
            height: 200px;
            background-color: red !important;
        }
    </style>


    <script type="text/javascript">
        window.onload = function () {
            //点击按钮修改box1的大小
            //获取box1
            var box1 = document.getElementById("box1");

            //为按钮绑定单击响应函数
            var btn01 = document.getElementById("btn");

            btn01.onclick = function () {
                //修改box1的宽度
                /*
                *通过js修改css的样式
                *   语法：元素.style.样式名=样式值
                *   在css中，样式如果带-，那么在js中是不合法的，例如：background-color
                *   需要将这种样式修改为驼峰命名法
                *      去掉-，然后后面的字母大写
                * 通过style设置的样式都是内联样式
                * 内联样式有较高的优先级，所以立即显示在页面中
                * 如果在样式后面添加！important，优先级最高，js设置的样式不会覆盖
                *   
                */
                box1.style.width = "300px";
                box1.style.backgroundColor = "yellow";

                //获取元素的样式
                var btn01 = document.getElementById("btn01");
                btn01.onclick = function () {
                    //读取box1的样式
                    //语法：元素.style.样式名
                    alert(box1.style.width);

                };


            };

        };

    </script>
</head>

<body>

    <button id="btn">点我一下</button>
    <button id="btn01">点我一下</button>
    <br><br>
    <div id="box1">


    </div>
</body>

</html>