JavaScript中查询元素样式的几种方法，以及区别。

心已赠人 2022-05-15 10:53 316阅读 0赞

**问题描述：**  
实现轮播图时，在达到某一偏移位置时需要将left（绝对定位的偏移）重置为0；从而使图片快速的回移，从而达到无缝轮播的效果。而到达的偏移位置是由一个判断条件所决定的，在这个判断条件中需要使用偏移量left和图片容器的宽度width进行比较。这篇文章讨论的是如何拿到这两个数值；

![这里写图片描述][70]  
上边的图片是js中查询样式方法的思维导图。有四个方法，接下来对这四种方法进行分析。

--------------------

## 方法1：getAttribute（） ##

![这里写图片描述][70 1]  
运行结果如上图；  
使用 对象名.getAttribute（”属性名”）；所返回的样式**只有行内样式**，没有内联样式，所以这种方式获取元素的样式是不完全的，有弊端；

## 方法2 ：点符号法 ##

<head>
        <style>
            #test1 {
                width:250px;
                height:100px;
                background-color: yellow;
            }
        </style>
    </head>
    <body>
    <div id="test1"  style="border: 1px solid red"></div>
    </body>
    <script>
        var div = document.getElementById("test1");
        console.log(div.style.backgroundColor);
        console.log(div.style.border);
    </script>

![这里写图片描述][70 2]  
运行结果如上图所示；  
第一个显示背景颜色的方式返回值为空。第二个调用border是可以返回的。  
得出结论：使用**点符号法只可以查询到行内样式**。

## 方法3：currentStyle() ##

**说明：**  
1：获取到的是优先级最高的样式（即显示出来的样式）；  
2：只适用于IE浏览器；  
3：一般这个方法会配合getComputedStyle（）进行使用，并使用if else来进行浏览器兼容；

console.log(test1.currentStyle("width"));

## 方法4:getComputedStyle() ##

**说明：**  
1：调用对象为window，因此可以省略；  
2：使用这个方法可以获取到元素的所有的位置的样式信息；  
3：这个方法适用于非IE浏览器；

接下来结合方法3，写一段有兼容性的获取样式代码

<head>
        <style>
            #test1 {
                width:250px;
                height:100px;
                background-color: yellow;
            }
        </style>
    </head>
    <body>
    <div id="test1"  style="border: 1px solid red"></div>
    </body>
    <script>
       var div = document.getElementById("test1");
       if(div.currentStyle){
           console.log("我是IE瀏覽器");
           console.log(div.currentStyle.width);
       }else{
           console.log("我是高版本的瀏覽器");
           console.log(window.getComputedStyle(div).width);
       }
    </script>

![这里写图片描述][70 3]  
![这里写图片描述][70 4]  
运行结果如上图所示；  
分别使用谷歌浏览器和IE浏览器显示效果！

--------------------

## 总结： ##

1：使用getAttribute（）方法只能获取到行内样式；  
2：使用点符号法调用元素对象的style对象，并调用出style的属性，也只能查询到行内样式；**注意：**如果使用点符号法添加元素属性相当于是添加行内样式；所以可以使用点符号法获取到新添加的属性！；  
3：对象名.currentStyle（”属性名”） 或 对象名.currentStyle.属性名；这两个都可以currentStyle就是元素的所有的style集合；只适用于IE浏览器；  
4: window.getComputedStyle(对象名，”伪类”).属性名 ；调用者是window对象，可以省略；注意内部对象参数不加引号；伪类是用于限定范围，可以省略；适用于非IE浏览器；  
5：需要多加注意的是，有些时候你使用不同的方法所获取到的元素的宽高等是带单位的，\*\*px ；这种String和Number是无法比较的；这个也是造成后来我解决了拿不出宽度的问题之后遇见的第二个问题，无法比较造成判断值为false，因此一直无法实现无缝轮播； 因此在比较的时候需要多加注意是否带单位！！！！！！

**最后的话：**  
1：曾经犯下的错，我低着头一遍一遍的观望，却没想到是丢失于细节之处；细节决定成败；  
2：有些话，你曾觉得他说的很对，但是一直感觉不到他对在哪里；等到发现的那一天，或许就感受到这种成长所带来的切肤之痛。

[70]: /images/20220515/bc36a67fd02d47f3b5bb90ca525c94fd.png
[70 1]: /images/20220515/94a3a9c6e7f74f8da96df6f33a4babc5.png
[70 2]: /images/20220515/c274ed2c43b7415ebdf9d0dcf11bd58b.png
[70 3]: /images/20220515/87cff683c48c493c802898d9ea67c1b4.png
[70 4]: /images/20220515/689527ab287e4d42b8ca87e0d61c7288.png