精确获取元素样式值

这个系列的文章会介绍如何精确取值，开篇准备了一些闲言碎语。

 

首先介绍两个工具方法：

/**
 * 把连字符形式转成驼峰形式，如margin-left => marginLeft
 * @param {String} name
 * @return {String}
 */
function camelize(name) {
    return name.replace(/-([a-z])/g, function($0, $1) {
        return $1.toUpperCase();
    });
}

/**
 * 把驼峰形式转成连字符形式，如marginLeft => margin-left
 * @param {String} name
 * @return {String}
 */
function capitalize(name) {
    return name.replace(/[A-Z]/g, function($0) {
        return '-' + $0.toLowerCase();
    });
}

　　

为了精确获取样式值，一般会用到 computedStyle。这东西会返回绝对值，什么是绝对值呢？

比如你设置 width: 50%，这里的 50% 是相对值，此外还有 em 等也是相对值，所谓的绝对值指的是 px，这也是我们日常开发中用的最多的单位。

 

不论你显式设置的是 2em 还是 50%，computedStyle 都会返回对应的像素值。但是IE不支持这个功能，而是变相的实现了 currentStyle，为了保证 currentStyle 和 computedStyle 保持一致，我们需要这样处理一下：

var getComputedStyle,
    numnonpxExpr = /^[-+]?(?:\d*\.)?(\d+)(?!px)[^\d\s]+$/i;

// 这么写是怕有人覆盖window.getComputedStyle，这样 IE8- 也有了getComputedStyle。。。
if (document.defaultView && document.defaultView.getComputedStyle) {
    getComputedStyle = function(elem, name) {
        name = capitalize(name);
        
        var defaultView = elem.ownerDocument.defaultView,
            computedStyle = defaultView.getComputedStyle(elem, null);

        return computedStyle[name];
    };
} else {
    getComputedStyle = function(elem, name) {
        var ret = elem.currentStyle[name];

        // 处理数值且单位非px的情况
        if (numnonpxExpr.test(ret)) {
            var style = elem.style,
                left = style.left,
                rsLeft = elem.runtimeStyle.left;

            elem.runtimeStyle.left = elem.currentStyle.left;
            style.left = ret;
            ret = style.pixelLeft + 'px';

            style.left = left;
            elem.runtimeStyle.left = rsLeft;
        } else {
            // 待续
        }

        return ret;
    };
}

 

IE的处理首先需要解决非px数值，这个技巧用于将em、pc、pt、cm、in、ex等单位转换为px，但不包括%。

 

待续部分后面会说

 

先明确一点，我们到底想得到什么，答案是数值对吧，至少大部分是数值。但问题是，在IE中，比如width，如果不显式设值，得到的结果是"auto" ，除此之外还有"inherit"这样的值在某个黑暗的角落等着你，是不是有种崩溃的感觉，具体可以参考 司徒正美的 《CSS的inherit与auto》，我不想说太多，因为需要动态获取样式的name不太多，没必要为不存在的需求在这里枚举。

 

那么有哪些样式需要动态获取呢？

1. 盒模型属性：width/height  padding  border  margin

2. 位置：top/right/bottom/left

3. 透明度

4. 浮动

5. 动画可能用到的 z-index display 等

 

其中值可能为 auto 的有：width / height / margin / top / right / bottom / left / z-index ( 远不止这些，比如 overflow 也可能是auto，所以我们要区别对待 )

 

值不可能为 inherit 的有：margin / border / padding / width / height / top / right / bottom / left / float / display

 

下面分篇详述