以往写显示隐藏效果时，一般都习惯将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标签，这才算基本完成了。

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <style>
  9.         .box{
  10.             width: 100px;
  11.             height: 100px;
  12.             background: red;
  13.             /* display: none; */
  14.         }
  15.     </style>
  16. </head>
  17. <body>
  18.     <span>显示隐藏</span>
  19.     <button class="btn">toggle</button>
  20.     <div class="box"></div>
  21. </body>
  22. <script>
  23.     var btn = document.querySelector('.btn');
  24.     var oBox = document.querySelector('.box');
  25.  
  26.     btn.onclick = function(){
  27.         if(getStyle(oBox, 'display') == 'none'){
  28.             show(oBox)
  29.         }else{
  30.             hide(oBox)
  31.         }
  32.         // alert(defaultDisplay(oBox));
  33.     }
  34.  
  35.     function show(el){
  36.         var display = el.display || defaultDisplay(el);
  37.         el.style.display = display;
  38.     }
  39.     function hide(el){
  40.         el.display = getStyle(el, 'display');//在元素隐藏前将其display属性值保存
  41.         el.style.display = 'none';
  42.     }
  43.     //判断节点是行内还是会计元素
  44.     function defaultDisplay(el){
  45.         var iframe = document.createElement('iframe');//相当于html作用域
  46.         document.body.appendChild(iframe);//将iframe追加进body中
  47.         var iframeDoc = ( iframe.contentWindow || iframe.contentDocument ).document;//iframe文档元素
  48.         var node = iframeDoc.createElement(el.nodeName)//创建要判断的节点
  49.         iframeDoc.body.appendChild(node);//将节点追加到iframe中
  50.         var display = getStyle(node, 'display');//判断节点属性
  51.         document.body.removeChild(iframe);//移除iframe
  52.         return display;
  53.     }
  54.     //获取样式
  55.     function getStyle(el, attr){
  56.         return el.currentStyle ? el.currentStyle[attr] : getComputedStyle(el)[attr];
  57.     }
  58. </script>
  59. </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. CSS布局之--各种居中

    居中是我们使用css来布局时常遇到的情况.使用css来进行居中时,有时一个属性就能搞定,有时则需要一定的技巧才能兼容到所有浏览器,本文就居中的一些常用方法做个简单的介绍. 注:本文所讲方法除了特别说明 ...

  2. 子RelativeLayout与layout_alignParentBottom属性会撑大视图

    如title所示,在一个子RelativeLayout中的某个元素如果设置了layout_alignParentBottom属性会导致这个RelativeLaytou的height wrap_cont ...

  3. 选择Web框架的20条标准

    原文观点由Matt Raible提出,关于Matt Rabile的介绍:http://www.infoq.com/cn/author/Matt-Raible 内容摘自<Java程序员修炼之道&g ...

  4. Ubuntu 18.04 启动root账号并授权远程登录

    Ubuntu 18.04 刚刚上市2个月,下载安装,尝尝鲜~ 安装界面看上去舒服许多, 安装的速度也较之前17.04 和16.04 都快了许多.抱歉,未截图. Ubuntu 安装完成后默认不启动roo ...

  5. asp.net core ABP模板本地化设置

    ABP的语言本地化设置非常方便,甚至地区图标ABP框架都已经有了. 先看看结果吧. 英文的界面 中文的界面 配置流程如下: 首先在Localization目录下新建一个对应的json文件,里面存放对应 ...

  6. Jenkins踩坑系列--你试过linux主机ssh登录windows，启动java进程吗，来试试吧

    一.问题概述 在一个多月前,组长让我研究下持续集成.我很自然地选择了jenkins.当时,(包括现在也是),部分服务器用的是windows主机. 我当时想了想,如果我把jenkins装在windows ...

  7. java 通过HttpURLConnection与servlet通信

    研究了一天才搞清楚,其实挺简单的,在这里记录下,以便以后参考. 一.创建一个servlet项目 主要包括(WEB-INF)里面有classes文件夹.lib文件夹.web.xml文件. 将写好的ser ...

  8. JDK及JRE目录结构

    JDK文件结构及目录: c:\jdk1.7.0: JDK安装根目录,包括版权.许可证和READEME文件,还包含ser.zip记录Java平台档案. c:\jdk1.7.0\bin 包含在Java开发 ...

  9. HTML学习笔记7：图片与超链接

    ①图片       <img/>标签,属性有: src,图片链接,分绝对路径和相对路径 width宽度 height,高度   ②超链接     <a>    内容描述     ...

  10. VS下使用Google Protobuf完成SOCKET通信

    如何在Windows环境下的VS中安装使用Google Protobuf完成SOCKET通信 出处:如何在Windows环境下的VS中安装使用Google Protobuf完成SOCKET通信 最近一 ...