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

最新推荐文章于 2023-09-20 21:45:39 发布

飞天代码

最新推荐文章于 2023-09-20 21:45:39 发布

阅读量7.9k

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/weiyongliang_813/article/details/79194143

版权

javascript 专栏收录该内容

26 篇文章 1 订阅

订阅专栏

度娘搜索原生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;
    },

飞天代码

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
2
评论
原生js实现jQuery的功能 show()方法实现 (三)

度娘搜索原生js实现jquery的show，你会发现大部分的回答就是el.style.display="block"；一开始我以为是对的，就发布到产品中了，一测试才发现其实该方法远远比想象中的复杂。比如界面上是2个a标签，而且是在一行的，如果使用上面的语句来显示a标签，会发现a标签换行了，这就说明显示操作不能简单的使用，而且跟标签是行内标签还是块级标签有关联。完整代码应该如下
复制链接

扫一扫