精确获取元素样式值

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

 

首先介绍两个工具方法:

/**
 * 把连字符形式转成驼峰形式,如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

 

下面分篇详述

posted @ 2012-06-27 19:23  越己  阅读(242)  评论(0编辑  收藏