JavaScript获取元素css属性

1 window.getComputedStyle(非IE)

语法

let styles = window.getComputedStyle(Element, [pseudoElt]);

该方法一共有两个参数,其中第一个为必须参数,第二个参数为可选参数,为空时会默认为null.

Element:需要计算样式的元素.注第一个参数必须是Element对象(传递一个非节点元素，如 一个#text 节点， 将会抛出一个错误).

pseudoElt:伪类元素的字符串.表示指定元素节点的伪元素（:before、:after、:first-line、:first-letter等）默认值为null.

注意事项

Window.getComputedStyle()方法返回一个对象，该对象在应用活动样式表并解析这些值可能包含的任何基本计算后报告元素的所有CSS属性的值。

注:

• Window.getComputedStyle()方法返回的style是一个实时的 CSSStyleDeclaration 对象，当元素的样式更改时，它会自动更新本身。
• Window.getComputedStyle()方法返回的对象style属性为只读,不能更改.

获取样式表中的样式

let style = window.getComputedStyle(Element, [pseudoElt]).getPropertyValue(property)

let style = window.getComputedStyle(Element, [pseudoElt]).property

let style = window.getComputedStyle(Element, [pseudoElt])[property]

注:获取元素的的样式时会获取该属性的全部值,有时会带单位,需要进行特殊处理,可以使用parseFloat( ).

2 Element.currentStyle(XIE)

语法

let styles = Element.currentStyle;

该方法不需要参数,需要计算样式的元素直接调用.

Element:必须参数.不可省略.

获取样式表中的样式

let style = Element.currentStyle.getAttribute(property)

let style = Element.currentStyle.property

let style = Element.currentStyle[property]

注:

perperty必须采用驼峰式的写法。如果需要获取 font-size 属性，那么传入的参数应该是 fontSize。因此在IE 中要获得单个属性的值，就必须将属性名转为驼峰形式。

3 Element.style.property

语法

let style = Element.style.property

Element:需要计算样式的元素. 

property:元素中需要获取的属性.

注意事项

•  该方法返回元素中属性的值,该方法可以读取可以赋值.
•  该方法只能获取元素内联样式表中的样式,不能获取内部和外部的样式表.

4 使用方法

 方法一:封装成函数

 function getStyle(Element,Property){
       return Element.currentStyle ? Element.currentStyle[Property] : getComputedStyle(ELement)[Property];
 }
 
 var oDiv = document.getElementById("test");
 alert(getStyle(oDiv,"top"));
参考自:https://www.cnblogs.com/jing-tian/p/10810181.html#4344496

 

方法二:IF语句判断

if (window.getComputedStyle) {
       style  = parseInt(getComputedStyle(Element)[Property])
} else {
        style = parseInt(Element.currentStyle[Property])
}