以往写显示隐藏效果时，一般都习惯将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()封装没有想象中那么简单的更多相关文章

  1. 食之无味？App Startup 可能比你想象中要简单

    请点赞关注,你的支持对我意义重大. Hi,我是小彭.本文已收录到 GitHub · AndroidFamily 中.这里有 Android 进阶成长知识体系,有志同道合的朋友,关注公众号 [彭旭锐] ...

  2. async/await 真不是你想象中那么简单

    先上代码 公共代码 function getData(data, time) { return new Promise(function (resolve, reject) { setTimeout( ...

  3. 刚刚完成了在vs2013中通过 ef连接mysql数据库的工作。感觉没有想象中的简单。试了n次终于成功。故记录成功的方法，希望可以帮到大家

    分两种情况,如果你是用entity framework 5.0的时候 mysql-connector-net的版本不是很重要. MySQL For VisualStudio的版本也不重要 (这个不装就 ...

  4. iOS中XMPP简单聊天实现 好友和聊天

    版权声明本文由陈怀哲首发自简书:http://www.jianshu.com/users/9f2e536b78fd/latest_articles;微信公众号:陈怀哲(chenhuaizhe2016) ...

  5. Jwt在Java项目中的简单实际应用

    1.什么是jwt 双方之间传递安全信息的简洁的.URL安全的表述性声明规范.JWT作为一个开放的标准(RFC 7519),定义了一种简洁的,自包含的方法用于通信双方之间以Json对象的形式安全的传递信 ...

  6. std::string的Copy-on-Write：不如想象中美好（VC不使用这种方式，而使用对小字符串更友好的SSO实现）

    Copy-on-write(以下简称COW)是一种很重要的优化手段.它的核心思想是懒惰处理多个实体的资源请求,在多个实体之间共享某些资源,直到有实体需要对资源进行修改时,才真正为该实体分配私有的资源. ...

  7. Java中的简单工厂模式

    举两个例子以快速明白Java中的简单 工厂模式: 女娲抟土造人话说:“天地开辟,未有人民,女娲抟土为人.”女娲需要用土造出一个个的人,但在女娲造出人之前,人的概念只存在于女娲的思想里面.女娲造人,这就 ...

  8. 对象属性封装到map中

    import java.beans.PropertyDescriptor; import java.lang.reflect.Method; import java.lang.reflect.Modi ...

  9. asp.net将sql语句封装在类库中

    将sql语句封装在cs中,通过类库的引用使用他的select.update.insert 源代码(cs): using System; using System.Collections.Generic ...

随机推荐

  1. C++各个存储区

    #include<iostream.h>void main(){char a[]="abc";栈 char b[]="abc";栈 char* c= ...

  2. 学习spring中遇见的问题

    报错: Unexpected exception parsing XML document from class path resource [applicationContext.xml]; nes ...

  3. 微信公众号网页授权登录--JAVA

    网上搜资料时,网友都说官方文档太垃圾了不易看懂,如何如何的.现在个人整理了一个通俗易懂易上手的,希望可以帮助到刚接触微信接口的你. 请看流程图!看懂图,就懂了一半了: 其实整体流程大体只需三步:用户点 ...

  4. R语言学习 第十一篇：日期和时间

    R语言的基础包中提供了三种基本类型用于处理日期和时间,Date用于处理日期,它不包括时间和时区信息:POSIXct/POSIXlt用于处理日期和时间,其中包括了日期.时间和时区信息.R内部在存储日期和 ...

  5. Scala编程入门---函数式编程之集合操作

    集合的函数式编程: 实战常用: //map案例实战:为List中的每个元素都添加一个前缀. List("leo","Jen","peter" ...

  6. Vue--学习过程中遇到的坑

    在这里总结一下学习Vue遇到的易错点,持续更新 1.实例化一个Vue对象: 通过new Vue({ el:'#id', data:{ a:'字符串1', b:‘字符串2’ }) 这里的Vue必须大写V ...

  7. td默认文字超出后显示..，点击tr时td文字显示完整

    做项目时,产品提的需求,table表格里面,每一列限制文字超出宽度后显示省略号,等点击td时,文字显示完整,今天整理了一下代码,积累一下 备注:1.邮箱和网址,在td里面不会自动换行,需要增加word ...

  8. PHP 中的 __FILE__ 和__DIR__常量

    __DIR__ :当前内容写在哪个文件就显示这个文件目录 __FILE__ : 当前内容写在哪个文件就显示这个文件目录+文件名 比如文件 b.php 包含如下内容: <?php $basedir ...

  9. 一文读懂阻塞、非阻塞、同步、异步IO

    介绍 在谈及网络IO的时候总避不开阻塞.非阻塞.同步.异步.IO多路复用.select.poll.epoll等这几个词语.在面试的时候也会被经常问到这几个的区别.本文就来讲一下这几个词语的含义.区别以 ...

  10. The more，the better。

    贪婪是好的, 贪婪是对的, 贪婪是有用的, 贪婪是可以清理一切的, 贪婪是不断进化和进步的精华所在, 贪婪就是一切形式所在: 对于生活,对于爱情,对于知识我们一定要贪婪, 贪婪就是人们的动力. The ...