javascript的样式获取--getComputedStyle、currentStyle、style

最新推荐文章于 2023-07-12 10:46:23 发布

sky_freely

最新推荐文章于 2023-07-12 10:46:23 发布

阅读量440

点赞数

本文链接：https://blog.csdn.net/liaochen09/article/details/50594091

版权

在css样式表有三种方式
内嵌样式（inline Style）：是写在html标签里的，内嵌样式只对所有的Tag有效。
内部样式（internal Style Sheet）：是写在HTML的<head><style></style></head>里面的，内部样式只对所在的网页有效。
外部样式表（External Style Sheet）：如果很多网页需要用到同样的样式(Styles)，将样式(Styles)写在一个以.css为后缀的CSS文件里，然后在每个需要用到这些样式(Styles)的网页里引用<link>这个CSS文件。

DOM标准引入了覆盖样式表的概念，document.getElementById(‘element').style.xxx可以获取元素的样式信息，可是它获取的只是DOM元素style属性里的内联样式规则，对于通过class属性引用的外部样式表的信息，是无法获取到的。

解决方案：引入currentStyle,getComputedStyle

如果要获取外部样式表中的信息，就会用到DOM标准里定义的，widow对象的全局方法getComputedStyle()， window.getComputedStyle(id,null).xxx，可以获取到当前对象样式规则信息如：getComputedStyle(obj,null).fontSize，就能获取到对象的字体大小。

但是存在兼容问题。IE浏览器不支持此方法，它有自己的一个实现方式currentStyle，但不同于全局方法getComputedStyle，它是作为DOM元素属性存在的。

PS：如果是获取背景色，这种方法在firefox和IE中的返回值还是不一样的，IE中是返回"#ffff99"样子的，而firefox中返回"rgb(238, 44, 34) "，值得注意的是：window.getComputedStyle(id,null)这种方式不能设置样式，只能获取，要设置还得写成类似这样id.style.background="#EE2C21";

解决兼容问题：

if(typeof window.getComputedStyle != 'undefined'){//w3c
    return window.getComputedStyle(id,null)[attribute];
}else if(typeof id.currentStyle != 'undefined'){
    return id.currentStyle[attribute];
}