第九章：样式模块

var getStyle = function (el, name) {
        if (el.style) {
            name = name.replace(/\-(\w)/g,function(all,letter) {
                return letter.toUpperCase();
            });
            if (window.getComputedStyle) {
                //getComputedStyle的第二个伪类是用于对付伪类的，如滚动条，placeholder,
                //但ie9不支持，因为我们只管元素节点，上面的el.style过滤掉了
                return el.ownerDocument.getComputedStyle(el, null)[name]
            } else {
                return el.currentStyle[ name ]
            }
        }
    }

var prefixes = ['', '-webkit-', '-moz-', '-ms-', '-o-'];
    var cssMap = {
        "float": $.support.cssFloat ? 'cssFloat' : 'styleFloat', background : "backgroundColor"
    };

    function cssName(name, host, camelCase) {
        if (cssMap[name]) {
            return cssMap[name];
        }
        host = host || document.documentElement
        for (var i = 0, n = prefixes.length; i < n; i++) {
            camelCase = $.String.camelCase(prefixes[i] + name);
            if (camelCase in host) {
                return (cssMap[name] = camelCase)
            }
        }
        return null;
    }

adapter["backgroundPosition:get"] = function(node, name, value) {
        var style = node.currentStyle;
        return style.backgroundPositionX + " " + style.backgroundPositionY
    };

adapter["zIndex:get"] = function (node) {
        while (node.nodeType !== 9) {
            //即使元素定为了，但如果z-index的值设置为 "aaa"这样的无效值。浏览器都会返回auto
            //如果没有指定z-index值，ie会返回0。其它返回auto
        var position = getter(node, "position") || "static";
        if (position !== "static") {
            // <div style="z-index:-10;" ><div style="z-index:0;"></div></div>
            var value = parseInt(getter(node, "zIndex"),10);
            if (!isNaN(value) && value !== 0) {
                return value;
            }
        }
        node = node.parentNode;
       }
       return 0
    }

$.fn.show = function() {
        return this.each(function() {
            this.style.display = "";
        })
    }

    $.fn.hide = function() {
        return this.each(function() {
            this.style.display = "none";
        })
    }

    $.fn.toggle = function() {
        return this.each(function() {
            this.style.display = isHidden(this) ? "" : "none";
        })
    }

    $.fn.isHidden = function(node) {
        return node.sourceIndex === 0 ||
        getter(node, "display") === "none" ||
        !$.contains(node.ownerDocument, node);
    }

function toggleDisplay(nodes, show) {
        var elem, values = [],
            status = [],
            index = 0,
            length = nodes.length;
    //由于传入的元素们可能存在包含关系，因此分开两个循环来处理，度土匪循环用于取得当前值或默认值
    for (; index < length; index++) {
        elem = nodes[index];
        if (!elem.style) {
            continue;
        }

        values[index] = $._data(elem, "olddisplay");
        status[index] = $.isHidden(elem);
        if (!values[index]) {
            values[index] = status[index] ? $.parseDispaly(elem.nodeName) : getter(elem,"display");
            $._data(elem,"olddisplay",values[index]);
        }
    }
    //第二个循环用于样式设置，-1为toggle,1为show，0为hide
    for (index = 0, index < length; index++) {
        elem = nodes[index];
        if (elem.style) {
            continue;
        }

        show = show === -1 ? !status[index] : "none";
    }
    return nodes
    }

$.fn.show = function() {
        return toggleDisplay (this, 1);
    };

    $.fn.hide = function() {
        return toggleDisplay (this, 0);
    }
    //state为true时，强制全部显示，为false时，强制全部隐藏
    $.fn.toggle = function() {
        return toggleDisplay (this, typeof state === "boolean" ? state : -1)
    }