获得DOM的CSS样式--CssJs

来源于jquery1.2.6源码总结

 

var userAgent = navigator.userAgent.toLowerCase();
var Browser = {
    version:(userAgent.match(/.+(?:rv|it|ra|ie)[\/: ]([\d.]+)/) || [])[1],
    safari:/webkit/.test(userAgent),
    opera:/opera/.test(userAgent),
    msie:/msie/.test(userAgent) && !/opera/.test(userAgent),
    mozilla:/mozilla/.test(userAgent) && !/(compatible|webkit)/.test(userAgent)
}

var CssJs = {
    styleFloat:Browser.msie ? "styleFloat" : "cssFloat",
    defaultView:document.defaultView || {},

    get:function (elem, name) {
        var _this = CssJs;
        var value, style = elem.style;

        function color(elem) {   //safari颜色修正
            if (!Browser.safari)
                return false;

            // defaultView is cached
            var ret = _this.defaultView.getComputedStyle(elem, null);
            return !ret || ret.getPropertyValue("color") == "";
        }

        // IE中的透明特殊处理
        if (name == "opacity" && Browser.msie) {
            /*value = elem.filter && elem.filter.indexOf("opacity=") >= 0 ?
                (parseFloat(elem.filter.match(/opacity=([^)]*)/)[1]) / 100) + '' :
                "" ;*/
            value = elem.currentStyle.filter && elem.currentStyle.filter.indexOf("opacity=") >= 0 ?
                (parseFloat(elem.currentStyle.filter.match(/opacity=([^)]*)/)[1]) / 100) + '' :
                "";
            return  value == "" ? 1 : value;
        }

        // Opera显示BUG
        if (Browser.opera && name == "display") {
            var save = style.outline;
            style.outline = "0 solid black";
            style.outline = save;
        }

        //浮动差异
        if (name.match(/float/i)) name = styleFloat;

        if (style && style[ name ]) return style[ name ];

        else if (_this.defaultView.getComputedStyle) { //w3c
            //浮动差异
            if (name.match(/float/i)) name = "float";
            //textAlign 转 text-Align； 使用传统的"text-Align"风格的规则书写方式，而不是"textAlign"
            name = name.replace(/([A-Z])/g, "-$1").toLowerCase();

            var computedStyle = _this.defaultView.getComputedStyle(elem, null);

            if (computedStyle && !color(elem)) {
                value = computedStyle.getPropertyValue(name);
            } else {//----------不考虑这里的else，应该也用不上
                var swap = [], stack = [], a = elem, i = 0;
                for (; a && color(a); a = a.parentNode) stack.unshift(a);

                for (; i < stack.length; i++) {
                    if (color(stack[ i ])) {
                        swap[ i ] = stack[ i ].style.display;
                        stack[ i ].style.display = "block";
                    }
                }

                value = name == "display" && swap[ stack.length - 1 ] != null ?
                    "none" :
                    ( computedStyle && computedStyle.getPropertyValue(name) ) || "";

                for (i = 0; i < swap.length; i++) {
                    if (swap[ i ] != null) stack[ i ].style.display = swap[ i ];
                }
            }

            if (name == "opacity" && value == "")
                value = "1";
        } else if (elem.currentStyle) {//ie
            var camelCase = name.replace(/\-(\w)/g, function (all, letter) {
                return letter.toUpperCase();
            });

            value = elem.currentStyle[ name ] || elem.currentStyle[ camelCase ];

            if (!/^\d+(px)?$/i.test(value) && /^\d/.test(value)) {//不是px单位的值
                // Remember the original values
                var left = style.left, rsLeft = elem.runtimeStyle.left;

                elem.runtimeStyle.left = elem.currentStyle.left;
                style.left = value || 0;
                value = style.pixelLeft + "px";

                // Revert the changed values
                style.left = left;
                elem.runtimeStyle.left = rsLeft;
            }
        }
        return value;
    }

}

/*
 * 1、getComputedStyle只读，style = window.getComputedStyle(dom , ":after");第二个参数“伪类”是必需的（如果不是伪类，设置为null）
 * 2、element.pixelLeft  自动换算出值对应的 px值
 * */

http://blog.csdn.net/xxb2008

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <script type="text/javascript" src="cssJs.js"></script>
</head>

<style type="text/css">
    h4{margin-bottom: 2px;}
    body{ margin: 0 auto; width: 1000px; height: 500px; padding: 10px; margin: 10px; border: 10px solid red}
    .clientBox{padding: 10px;opacity: 0.5; filter: alpha(opacity=50);margin: 10px; cursor: move;  width: 10px; 
overflow: hidden; height: 10px; border: 10px solid red; position: absolute; left: 100px;top:100px;background: white}
    #msg{position: fixed;right: 0; top: 20px}
</style>


<body>

<div class="clientBox" id="clientBox"></div>
<div id="msg"></div>


</body>
</html>

<script type="text/javascript">
    var Dom = {
        $:function (id) {
            return typeof id === "string" ? document.getElementById(id) : id;
        }
    }
    var marginTop = CssJs.get(Dom.$("clientBox"), "opacity");
    Dom.$("msg").innerHTML = marginTop;
</script>