原生JS获取CSS样式-2.计算属性getComputedSty

1. 虽然 style 对象能够提供支持 style 特性的任何元素的样式信息，但它不包含那些从其他样式表层叠而来并影响到当前元素的样式信息
2. 而“DOM2 级样式”增加了 document.defaultView ，提供了getComputedStyle() 方法, 返回CSSStyleDeclaration 对象（与 style 属性的类型相同)，并且是计算过后的样式(行内，内嵌(内部)， 外链)

语法：
window.getComputedStyle(element, "");
两种写法： window.getComputedStyle() || document.defaultView.getComputedStyle()

第一个参数： 取得计算样式的元素；
第二个参数： 伪元素字符串(':after') 在旧版本之前，第二个参数“伪类”是必需的，现代浏览器已经不是必需参数了

在 IE 中:
每个具有 style 属性的元素还有一个 currentStyle 属性,这个属性是 CSSStyleDeclaration 的实例，包含当前元素全部计算后的样式
语法： element.currentStyle

栗子：
HTML + 行内样式

<div style="color: blue; background-color: yellow !important;">假装有内容</div>

style样式(head中)

div {
    width: 100px;
    line-height: 100px;
    background-color: red;
    border: 6px solid #ccc;
    text-align: center;
}

外链样式(link)

<link rel="stylesheet" href="./index.css">

div {
  background-color: blue;
  border: 10px solid #ccc;
}

function getStyle(ele, cla) {
    return window.getComputedStyle ? window.getComputedStyle(ele, cla || null) : ele.currentStyle;
}

console.log(getStyle(divEle)); // 返回CSSStyleDeclaration
console.log(getStyle(divEle).width); // 100px
console.log(getStyle(divEle).getPropertyValue('color')); // rgb(0, 0, 255)
console.log(getStyle(divEle).backgroundColor); // rgb(255, 255, 0)

效果图：

getComputedStyle.PNG

计算属性获取的是最后渲染到页面呈现的样式值

兼容写法：

/**
 * 获取元素计算过后的属性
 * @param {*} ele ：元素
 * @param {*} cla : 伪类
 */
function getStyle(ele, cla) {
    return window.getComputedStyle ? window.getComputedStyle(ele, cla || null) : ele.currentStyle;
}

这一篇都敢看到这？

timg3.gif

上一篇：原生JS获取及设置样式-1.行内样式
下一篇：原生JS获取及设置样式-3.操作样式表