视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
JS使用getComputedStyle()方法获取CSS属性值_javascript技巧
2020-11-27 21:22:05 责编:小采
文档


在对网页进行调试的过程中,经常会用到js来获取元素的CSS样式,方法有很多很多,现在仅把我经常用的方法总结如下:

1. obj.style:这个方法只能JS只能获取写在html标签中的写在style属性中的值(style=”…”),而无法获取定义在


JS获取CSS属性值

alert(document.getElementById(“css88″).style.width);//200px
alert(document.getElementById(“css88″).style.color);//空白




2. IE中使用的是obj.currentStyle方法,而FF是用的是getComputedStyle 方法

“DOM2级样式”增强了document.defaultView,提供了getComputedStyle()方法。这个方法接受两个参数:要取得计算样式的元素和一个伪元素字符串(例如“:after”)。如果不需要伪元素信息,第二个参数可以是null。getComputerStyle()方法返回一个CSSStyleDeclaration对象,其中包含当前元素的所有计算的样式。以下面的HTML页面为例:
代码如下:



计算元素样式




var myDiv = document.getElementById("myDiv");
var computedStyle = document.defaultView.getComputedStyle(myDiv, null);
alert(computedStyle.backgroundColor); //"red"
alert(computedStyle.width); //"100px"
alert(computedStyle.height); //"200px"
alert(computedStyle.border); //在某些浏览器中是“1px solid black”





边框属性可能也不会返回样式表中实际的border规则(Opera会返回,但其它浏览器不会)。存在这个差别的原因是不同浏览器解释综合属性的方式不同,因为设置这种属性实际上会涉及很多其他的属性。在设置border时,实际上是设置了四个边的边框宽度、颜色、样式属性。因此,即使computedStyle.border不会在所有浏览器中都返回值,但computedStyle.borderLeftWidth则会返回值。

需要注意的是,即使有些浏览器支持这种功能,但表示值的方式可能会有所区别。例如,Firefox和Safari会返回将所有颜色转换成RGB格式。因此,即使getComputedStyle()方法时,最好多在几种浏览器中测试一下。

IE不支持getComputedStyle()方法,但它有一种类似的概念。在IE中,每个具有style属性的元素还有一个currentStyle属性。这个属性是CSSStyleDeclaration的实例,包含当前元素全部计算后的样式。取得这些样式的方法差不多,如下:
代码如下:
var myDiv = document.getElementById("myDiv");
var computedStyle = myDiv.currentStyle;
alert(computedStyle.backgroundColor); //"red"
alert(computedStyle.width); //"100px"
alert(computedStyle.height); //"200px"
alert(computedStyle.border); //undefined

与DOM版本的方式一样,IE也没有返回border样式,因为这是一个综合属性。

3. 我自己在写测试case过程中写的一个简单的函数(适用于Chrome):
代码如下:
function getCSS(div){
return document.defaultView.getComputedStyle(div, null);
//return div.currentStyle;//没用过,IE
}

下载本文
显示全文
专题