原生js实现jQuery的功能 show()方法实现 (三)

心已赠人 2022-06-01 12:11 187阅读 0赞

度娘搜索原生js实现jquery的show，你会发现大部分的回答就是

el.style.display="block"；

一开始我以为是对的，就发布到产品中了，一测试才发现其实该方法远远比想象中的复杂。  
比如界面上是2个a标签，而且是在一行的，如果使用上面的语句来显示a标签，会发现a标签换行了，这就说明显示操作不能简单的使用，而且跟标签是行内标签还是块级标签有关联。  
完整代码应该如下

//显示元素
        showEl: function (elId) { 
            var node = GoingUtils.getElObj(elId);
            if (node != null) {
                return GoingUtils.showHide([node], true );
            }
        },
         //隐藏 显示相应的元素
        showHide: function (elements, show) { 
            var elemdisplay = { BODY: "block" };var iframe,iframeDoc=null;
            function css_defaultDisplay( nodeName ) { 
                if ( elemdisplay[ nodeName ] ) {
                    return elemdisplay[ nodeName ];
                }
                var id=GoingUtils.getUUid();
                var elm=GoingUtils.appendToBody("<" + nodeName + " id='"+id+"'>");
                display = GoingUtils._getStyleValue(id,"display");
                GoingUtils.removeEl(id);
    
                if ( display === "none" || display === "" ) {
                    var iframeEl=document.createElement("iframe");
                    iframeEl.style.frameBorder=0;
                    iframeEl.style.width=0;
                    iframeEl.style.height=0;
                    GoingUtils.appendToBody(iframeEl);
                    if ( !iframeDoc || !iframe.createElement ) {
                        iframeDoc = ( iframe.contentWindow || iframe.contentDocument ).document;
                        iframeDoc.write("<!doctype html><html><body>");
                        iframeDoc.close();
                    }
                    elem = iframeDoc.body.appendChild( iframeDoc.createElement(nodeName) );
                    display = GoingUtils._getStyleValue( elem, "display" );
                    document.body.removeChild( iframe );
                }
                elemdisplay[ nodeName ] = display;
                return display;
            }
            function isHidden( elem, el ) { 
                elem = el || elem;
                return GoingUtils._getStyleValue( elem, "display" ) === "none";
            }
    
            var elem, display,
                values = [],
                index = 0,
                length = elements.length;
    
            for (; index < length; index++) {
                elem = elements[index];
                if (!elem.style) {
                    continue;
                }
                if (show) {
                    //如果是style上定义的none 则直接设置成“”
                    if (!values[index] && elem.style.display === "none") {
                        elem.style.display = "";
                    }
    
                    //但如果是设置在css里面则不能简单的设置成""的方式
                    if (elem.style.display === "" && isHidden(elem)) {
                        values[index] = css_defaultDisplay(elem.nodeName);
                    }
                }
            }
    
            for (index = 0; index < length; index++) {
                elem = elements[index];
                if (!elem.style) {
                    continue;
                }
                if (!show || elem.style.display === "none" || elem.style.display === "") {
                    elem.style.display = show ? values[index] || "" : "none";
                }
            }
            return elements;
        },