JS中style、currentStyle、getComputedStyle的区别

最新推荐文章于 2024-04-20 10:42:47 发布

甜妹

最新推荐文章于 2024-04-20 10:42:47 发布

阅读量520

点赞数

分类专栏： javaScript

javaScript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

在说到它们之间的区别时，我们首先说说层叠样式表的是三种形式：

1，内联样式：在HTML标签用style属性设置

例如：<p style = "color : #456">内联样式</p>

2.嵌入样式：通过<head>标签内通过<style>标签设置

p {color:#456}

</style>

3. 外部样式：通过<link>标签设置

p{{color:#456};

区别：

使用style只能获取元素的内联样式，内部样式和外部样式使用style是获取不到的。

currentStyle是兼容IE浏览器的。

getComputedStyle与currentStyle作用相同，但是适用于opera、firefox，safari、chrome。

getComputedStyle与style的区别

只读与可写：
getComputedStyle方法是只读的，只能获取样式，不能设置；而element.style能读能写

获取的对象范围：

getComputedStyle方法获取的是最终应用在元素上的所有CSS属性对象（即使没有CSS代码，也会把默认的都显示出来）；而element.style只能获取元素style属性中的CSS样式。因此对于一个光秃秃的元素<p>，getComputedStyle方法返回对象中length属性值（如果有），而element.style就是0。

注意：getComputerStyle()方法的第一个参数为元素，第二个参数为伪类，返回一个CSSStyleDeclaration对象。

实例：

[html]view plaincopy 
   
print?
 <script type="text/javascript">  
             function test(){  
                 var p = document.getElementById("p1");  
                 var cla = window.getComputedStyle(p1,null);  
                       
                 alert(cla["backgroundColor"]);  
             }  
         </script>  
 <p id="p1" style="background-color: blueviolet;">你好啊，地球人</p>  
       <form>  
         <input type="button" value="显示" onclick="test()" />  
       </form>  

甜妹

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS中style、currentStyle、getComputedStyle的区别

在说到它们之间的区别时，我们首先说说层叠样式表的是三种形式：1，内联样式：在HTML标签用style属性设置例如：内联样式2.嵌入样式：通过标签内通过标签设置p {color:#456}3. 外部样式：通过标签设置p{{color:#456};区别：使用style只能获取元素的内联样式，内部样
复制链接

扫一扫