在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]; }