DOM修改Css样式_css dom元素添加样式-CSDN博客

本文链接：https://blog.csdn.net/dengfengling999/article/details/122566329

1.修改box1的宽度、高度、背景颜色

2.读取样式

读取样式表style的样式

语法：元素.currentStyle.样式名

它可以用来读取当前元素正在显示的样式（谁生效就获取谁的）

如果当前元素没有设置样式，则获取默认值

注意currentStyle只有IE浏览器支持，其他不支持

在其他浏览器可以使用：getComputerStyle（）这个方法获取元素当前的样式，不支持ie8以下浏览器

这个方法是windows的方法，需要2个参数：

第一个，要获取样式的元素

第二个,可以传递一个伪元素，一般都传null

getComputerStyle（）返回一个对象，再通过点调用

getComputerStyle（box1，null）.width；

如果不设置宽度，currentStyle会获取auto，getComputerStyle会获取具体的值

通过currentStyle和getComputerStyle（）读取到的样式只是值读的不能修改，如果先要修改必须通过Style

<!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>Document</title>
    <style>
        #box1 {
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
    <script>
        window.onload = function () {
            //点击按钮修改box1大小

            //获取box1
            var box1 = document.getElementById("box1");

            //为按钮绑定单击响应函数
            var btn01 = document.getElementById("btn01");
            btn01.onclick = function () {
                //修改box1的宽度
                /*
                  语法： 元素.style.样式名=样式值
                */
                box1.style.width = "300px";
                box1.style.height = "300px";
                box1.style.backgroundColor = "yellow";

            };
            //点击btn02读取元素样式
            var btn02 = document.getElementById("btn02");
            btn02.onclick = function () {
                // alert(box1.style.height + box1.style.width);
                //获取元素样式表的样式
                //alert(box1.currentStyle.width);//只ie支持

                var obj = getComputedStyle(box1, null);
                //alert(getComputedStyle(box1, null).width);//不支持IE8以下浏览器

                //调用写的函数
                alert(getStyle(box1, "width"));

            };



        };
        /*
          定义一个函数，用来获取指定元素的当前的样式
          参数： obj：要获取样式的元素
                name：要获取的样式名   
        */
        function getStyle(obj, name) {
            if (window.getComputedStyle) {//正常浏览器有getComputedStyle这个方法，ie8以上有
                return getComputedStyle(obj, null)[name];//正常浏览器
            } else {
                return obj.currentStyle[name];//IE浏览器
            }

        }
    </script>
</head>

<body>
    <button id="btn01">修改</button>
    <button id="btn02">读取样式</button>
    <div id="box1"></div>
</body>

</html>