JS中style、currentStyle、getComputedStyle的区别

最新推荐文章于 2022-04-07 10:23:31 发布

-Sloth-

最新推荐文章于 2022-04-07 10:23:31 发布

阅读量1k

点赞数

分类专栏： Web前端

本文链接：https://blog.csdn.net/qq_29882585/article/details/52214055

版权

Web前端专栏收录该内容

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对象。

实例：

<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="显示" οnclick="test()" />
      </form>

-Sloth-

关注

0
点赞
踩
0

收藏

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

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

扫一扫

专栏目录