六、计算后的样式

计算后的样式：

表示html元素在各种选择器的综合作用下，最终的样式

通过style只能读取行内样式，不能读取计算后的样式

<div class="box" id="box" style="width: 100px;">盒子</div>

   .box {
            width: 200px;
            height: 100px;
            border: 1px solid #000;
        }

// 通过style只能读取行内样式，不能读取计算后的样式
var oBox = document.getElementById("box");
console.log(oBox.style.width);                  // 100px

6.1 高级浏览器

不兼容IE6,7,8

6.1.1 getComputedStyle()

• getComputedStyle()：

  • 调用对象：window

  • 参数：要读取的元素对象

  • 返回值：所有计算后的样式集合

<img src="images/01.jpeg" alt="" id="pic">

     img {
            width: 260px;
            border: 10px solid #f00;
        }

  // 计算后的样式
        console.log(window.getComputedStyle(oPic));

6.1.2 getPropertyValue()

返回值可以继续打点调用getPropertyValue()方法

• 参数：属性名

• 返回值：属性值

单一属性书写为短横语法

var width = window.getComputedStyle(oPic).getPropertyValue("width");
console.log(width);         // 260px

还可以使用中括号

console.log(window.getComputedStyle(oPic)["border-width"]);         // 10px

6.2 IE6,7,8 currentStyle

IE6,7,8不认识window.getComputedStyle()

使用的是currentStyle

• 调用对象：元素对像

• 返回值：样式集合

想得到属性值，需要继续打点调用属性名（单一属性使用驼峰命名法）

// 直接点语法样式读取，驼峰
oBox.innerHTML = oPic.currentStyle.width;
oBox.innerHTML = oPic.currentStyle["borderColor];

6.3 能力检测

检测浏览器是否认识window.getComputedStyle，不加小括号，认识则返回值为true，否则为false

// 能力检测
if(window.getComputedStyle){
    // 高级
    oBox.innerHTML = window.getComputedStyle(oPic).getPropertyValue("border-style");
}else{
    // IE6,7,8
    oBox.innerHTML = oPic.currentStyle.borderStyle;
}

// 获取元素对象
var oBox = document.getElementById("box");
var oPic = document.getElementById("pic");
// 将img边框宽度输出到盒子中
oBox.innerHTML = getValue("borderWidth",oPic);
// 函数思维目的：用户输入属性名和对象，我们可以返回该对象计算后的属性值
// 参数 border-width, borderWidth
// 返回值
function getValue(property,obj){
    if(window.getComputedStyle){
        // 高级
        // 将属性名改为短横写法 borderWidth改为border-width
        property = property.replace(/([A-Z])/g, function (match, $1) {
            return "-" + $1.toLowerCase();
        });
        // 将属性值返回
        return window.getComputedStyle(obj)[property];
    }else{
        // IE 6,7,8 border-width改为borderWidth
        property = property.replace(/-([a-z])/g, function (match, $1) {
            return $1.toUpperCase();
        });
        // 将属性值返回
        return obj.currentStyle[property];
    }
}