JavaScript 坑与技巧——获取style值

获取 style 值

style 也是元素对象的属性，它的值不是字符串，而是一个 CSSStyleDeclaration 对象。

坑：

this.style.color; // 直接获取颜色
this.style.width; // 直接获取宽度

由于 style 只会获取或设置内联样式，所以，假如已存在的内联样式属性会被获取，不是内联样式的属性值会是空字符串。查询元素样式，可以使用计算样式。

使用 getAttribute("style")或style.cssText查询的是内联样式的属性和值的字符串，不是内联样式的属性值是null和空字符串。

使用setAttribute("style",'xx:xxx;')或style.cssText='xx:xxx;'也是设置内联样式，同时使用后面会覆盖前面的设置。

元素的计算样式是一组属性值，它由浏览器通过把内联样式结合所有样式表中所有可应用的样式规则后计算得到的。它是一组在显示元素时实际使用的属性值。计算样式也是用一个 CSSStyleDeclaration 对象来表示，但计算样式是只读的。

使用浏览器窗口对象的getComputedStyle(ele,null)方法来获取一个元素的计算样式。第一个参数是要获取计算样式的元素，第二个参数也是必须的，通常是null或空字符串，但也可以是命名 CSS 伪对象的字符串，如:before、:after、:first-line、:first-letter。

getComputedStyle()方法返回值是一个 CSSStyleDeclaration 对象，它代表了应用在指定元素或伪对象上的所有样式。

表示计算样式的 CSSStyleDeclaration 对象和表示内联样式的对象之间的区别：

• 计算样式的属性是只读的。
• 计算样式的值是绝对值：类似百分百和点之类相对的单位将全部转换为绝对值。所有指定尺寸的属性都有一个以像素为单位的值。该值是以px为后缀的字符串，使用时仍然需要解析它，但不用担心单位的解析或转换。其值是颜色的属性以rgb(#,#,#)或rgba(#,#,#,#)的格式返回。
• 不计算符合属性。只基于最基础的属性。如，不要查询margin属性，而应该使用marginLeft或marginTop等。
• 计算样式的 cssText 属性未定义。

如下例子使用查询计算样式和内联样式：

// 用指定的参数缩放元素e的字体大小
function scale(e,factor){
    // 用计算样式查询当前字体大小
    var size = parseInt(window.getComputedStyle(e,'').fontSize);
    // 用内联样式来设置字体大小
    e.style.fontSize = factor * size + 'px';
}
// 用指定的参数修改元素e的背景颜色 factor>1颜色变浅 factor<1颜色变暗
function scaleColor(e,factor){
    var color = window.getComputedStyle(e,'').backgroundColor;
    var components = color.match(/[\d\.]+/g); // 将r g b a的值放到数组中
    for(var i=0; i<3; i++){
        var x = Number(components[i] * factor);
        x = Math.round(Math.min(Math.max(x,0),255)); // 设置边界并取整
        components[i] = String(x);
    }
    if(components.length == 3){ // rgb
        e.style.backgroundColor = 'rgb(' + components.join() + ')';
    }else{ // rgba
        e.style.backgroundColor = 'rgba(' + components.join() + ')';
    }
}

** 计算样式也有坑，例如查询fontFamily属性时，得到的值可能是类似于arial,helvetica,sans-serif而不会知道实际使用了哪种字体。类似的，如果没有绝对定位元素，试图通过计算样式的top和left属性查询它的位置和尺寸通常会返回auto。**