show()封装没有想象中那么简单

Posted samfung

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了show()封装没有想象中那么简单相关的知识,希望对你有一定的参考价值。

以往写显示隐藏效果时,一般都习惯将display值设为none和block,隐藏是对的,就是display=‘none‘,但显示时我们一昧的display=‘block‘会将行内元素变成块级元素,或许你不太在意,但这始终是不对的。

那么该怎么来判断在元素显示时给它的display值设为block还是inline还是inline-block呢,我的想法是在元素隐藏前将它的display值保存起来,然后在显示的时候再将这个值设置回去就可以了。问题解决了?no,这个方法只对一开始是显示的元素有用,如果元素一上来是隐藏的,那么你获取它的display值是none,于是你还是不知道要将它显示的时候display写什么值。这时会想到,写个判断元素是行内还是块级的函数,恩,这应该是正确的思路。

一开始我创建临时节点加入到body中在获取节点样式display值,一般情况下是可以的,但也只是一般情况下,如果我一开始写样式表的时候用了该标签选择器来写,比如span{ display: none; },这时获取创建的span的display值也是none,那又该怎么办呢?恩,先加一个iframe标签,这才算基本完成了。

下面贴出完整代码,代码中有注释

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background: red;
            /* display: none; */
        }
    </style>
</head>
<body>
    <span>显示隐藏</span>
    <button class="btn">toggle</button>
    <div class="box"></div>
</body>
<script>
    var btn = document.querySelector(‘.btn‘);
    var oBox = document.querySelector(‘.box‘);

    btn.onclick = function(){
        if(getStyle(oBox, ‘display‘) == ‘none‘){
            show(oBox)
        }else{
            hide(oBox)
        }
        // alert(defaultDisplay(oBox));
    }

    function show(el){
        var display = el.display || defaultDisplay(el);
        el.style.display = display;
    }
    function hide(el){
        el.display = getStyle(el, ‘display‘);//在元素隐藏前将其display属性值保存
        el.style.display = ‘none‘;
    }
    //判断节点是行内还是会计元素
    function defaultDisplay(el){
        var iframe = document.createElement(‘iframe‘);//相当于html作用域
        document.body.appendChild(iframe);//将iframe追加进body中
        var iframeDoc = ( iframe.contentWindow || iframe.contentDocument ).document;//iframe文档元素
        var node = iframeDoc.createElement(el.nodeName)//创建要判断的节点
        iframeDoc.body.appendChild(node);//将节点追加到iframe中
        var display = getStyle(node, ‘display‘);//判断节点属性
        document.body.removeChild(iframe);//移除iframe
        return display;
    }
    //获取样式
    function getStyle(el, attr){
        return el.currentStyle ? el.currentStyle[attr] : getComputedStyle(el)[attr];
    }
</script>
</html>

  

以上是关于show()封装没有想象中那么简单的主要内容,如果未能解决你的问题,请参考以下文章

高并发线程的生命周期其实没有我们想象的那么简单!!

python3 面向对象之封装

iOS-SDWebimage底层实现原理

回归 | js实用代码片段的封装与总结(持续更新中...)

Java集合详解12:arraylist和linkedlist面试题汇总,可能没有你想象中那么简单!

单例模式绝对没有你想象的那么简单!不服来战!