获取元素的 CSS 属性

获取元素的 CSS 属性

• 工具函数
  
  • 获取元素的 CSS 属性
    
    • (1)使用 HTMLElement.style.属性名
    • (2)使用 window.getComputedStyle
    • 兼容处理

---

(1)使用 HTMLElement.style.属性名

MDN 详解

HTMLElement.style 属性返回一个 CSSStyleDeclaration 对象(只读)，该对象包含元素的内联 style 属性（attribute），但忽略任何样式表的属性。

CSS 属性列表:CSS Properties Reference

需要我们把元素的样式都写在行内样式上才可以（写在样式表中是不管用的）

console.log(ele.style.height);

• 设置 style 属性

因为CSSStyleDeclaration对象是只读的，所以不能直接给 style 赋值：如：elt.style = "color: blue;"；而应该通过单独的样式属性设置：如：elt.style.color = 'red';

• 该方法只能获取内嵌样式，如果要获取所有的 css 属性样式，应该使用getComputedStyle方法；

---

(2)使用 window.getComputedStyle

MDN 详解

• 语法：let style = window.getComputedStyle(element, [pseudoElt]);

或者：let style = document.defaultView.getComputedStyle(element, [pseudoElt]);

关于这两种写法的区别：两种方式是一样的，只有一种情况，必须使用 defaultView，那是在 firefox3.6 上访问子框架内的样式；

• 参数：

element：获取计算样式的元素；

pseudoElt（可选）：指定一个要匹配的伪元素的字符串。必须对普通元素省略（或 null）；

• 返回值：(只读)

返回的 style 是一个实时的 CSSStyleDeclaration 这个对象的实例，包含了当前元素的所有样式属性及其值；

当元素的样式更改时，该实例会自动更新；

console.log(window.getComputedStyle); //function
console.log(window.getComputedStyle(curEle, null))["height"];

• 更多详情

---

兼容处理

• 兼容问题：

getComputedStyle方法在 IE6-8 下是不兼容的，可以使用 currentStyle 来获取计算样式:

console.log(ele.currentStyle);
console.log(ele.currentStyle.height);

• 封装函数：

getCss：获取当前元素所有经过浏览器计算过的样式中的[attr]对应的值

/*
*curEle:当前元素
*attr:属性
*/
function getCss(curEle, attr){
            return curEle.currentstyle ?
            curEle.currentstyle[attr] :
            document.defaultView.getComputedStyle(curEle, null)[attr];
        };