这篇文章是我自己在学习js过程中做的笔记,如果有错误或者遗漏的请评论告诉我。希望大家一起学习!
笔记内容主要有:获取行间、内联、外联样式属性
- 获取行间样式
element.style.属性
- 获取内联 外联样式 window.getComputedStyle(element, pseudoElement)
getComputedStyle 和 element.style 的异同:
相同点就是:
二者返回的都是 CSSStyleDeclaration 对象,取相应属性值得时候都是采用的 CSS 驼峰式写法,均需要注意 float 属性。
而不同点就是:
element.style 读取的只是元素的行间样式,即写在元素的 style 属性上的样式;
而 getComputedStyle 读取的样式是最终样式,包括了内联样式、嵌入样式和外部样式。
element.style 既支持读也支持写,我们通过 element.style 即可改写元素的样式。
而 getComputedStyle 仅支持读并不支持写入。我们可以通过使用 getComputedStyle 读取样式,通过 element.style 修改样式
兼容性:
关于 getComputedStyle 的兼容性问题,在 Chrome 和 Firefox 是支持该属性的,同时 IE 9 10 11
也是支持相同的特性的,IE 8并不支持这个特性。 IE 8 支持的是 element.currentStyle
这个属性,这个属性返回的值和 getComputedStyle 的返回基本一致,只是在 float 的支持上,IE 8
支持的是 styleFloat,这点需要注意。
下面是封装好的一个函数(获取样式 兼容IE和非IE)
obj:要获取的对象
css:获取对象的属性
function getCss(obj,css){
if (obj.currentStyle) { //兼容IE8以下
return obj.currentStyle[css];
}else{
return getComputedStyle(obj, null)[css];
}
}