JavaScript操作样式：修改与读取-优快云博客

本文链接：https://blog.youkuaiyun.com/mantou_riji/article/details/124018090

文章目录

修改样式
读取样式

修改样式

通过JS修改元素的样式:
语法:元素.style.样式名=样式值
==注意:==如果CSS的样式名中含有-，比如background-color，这种名称在JS中是不合法的。
使用方法：去掉-，然后将-后的字母大写（即驼峰命名法），如:backgroundColor
我们通过style属性设置的样式都是内联样式,
而内联样式有较高的优先级，所以通过JS修改的样式往往会立即显示。
但是如果在样式中写了!important，则此时样式会有最高的优先级，即使通过JS也不能覆盖该样式，此时将会导致JS修改样式失效，所以尽量不要为样式添加!important

读取样式

语法:`元素.style.样式名

通过style属性设置和读取的都是内联样式，即style"样式"中的样式，无法读取样式表（即<style>标签中）中的样式：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #box1{
            width: 200px;
            height: 200px;
            background-color: plum;
        }

    </style>
    <script>
        window.onload = function(){
            var box1 = document.getElementById("box1");
            var btn1 = document.getElementById("btn1");
            btn1.onclick = function(){
                box1.style.width = "300px";
                box1.style.backgroundColor = "yellow";
            }

             var btn2 = document.getElementById("btn2");
            btn2.onclick = function(){
                // 带符号
                alert(box1.style.width);
            }




        }
    </script>
</head>
<body>
    <div id ="box1">
    </div>
    <br>
    <button id="btn1">点击按钮修改</button>
    <button id = "btn2">点击按钮读取样式</button>

    
</body>
</html>

在这里插入图片描述
正是由于这种属性，直接点击第二个按钮是不能直接读取样式的，只有点击按钮1生成如下样式之后，再点击按钮2才能有样式输出。

获取元素当前显示的样式
语法：元素.currentStyle.样式名
它可以用来读取当前元素正在显示的样式，不管样式是内联的还是样式表中的。
如果没有改样式则返回默认值。
但是这个属性只有在IE中才有效
getComputedstyle()这个方法来获取元素当前的样式
语法：getComputedstyle(要获取样式的元素，可以传递一个伪元素（一般都传NULL）)
他是window的方法，可以直接使用。
该方法会返回一个对象,对象中封装了当前元素对应的样式,
通过 . 再获取样式。
如果获取的样式没有设置，则会获取到真实的值，而不是默认值比如:没有设置width,它不会获取到auto，而是一个长度。

 var btn2 = document.getElementById("btn2");
            btn2.onclick = function(){
                var obj = getComputedStyle(box1,null);
                alert(obj.width);
                
            }

自己写函数获取样式
根据不同的版本，调用不同的函数。

            /*
            obj:要获取样式的元素
            name：要获取的样式名
            */

            function getStyle(obj,name){
                // 这里要写window.getComputedStyle，而不能写getComputedStyle；
                //因为只写getComputedStyle相当于写了一个变量。变量找不到,会报错；window.getComputedStyle相当于属性，属性找不到，返回undefine
             if(window.getComputedStyle){
              // 正常浏览器
               return getComputedStyle(obj,null)[name];
              //    IE8
              }else{
               return obj.currentStrly[name];
               }
            //    简写：
            // return window.getComputedStyle?getComputedStyle(obj,null)[name]:obj.currentStrly[name];

            }