获得DOM的CSS样式--CssJs

来源：互联网发布：java io流文件设备编辑：程序博客网时间：2024/06/05 15:41

来源于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>

0 0