以往写显示隐藏效果时,一般都习惯将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. javaScript(2)---简单使用

    javaScript(2)---简单使用 学习要点: 1.创建一张HTML页面 2.<Script>标签解析 3.JS代码嵌入的一些问题 一.创建一张HTML页面 <!DOCTYPE ...

  2. java并发包分析之———Atomic类型

    一.何谓Atomic?   Atomic一词跟原子有点关系,后者曾被人认为是最小物质的单位.计算机中的Atomic是指不能分割成若干部分的意思.如果一段代码被认为是Atomic,则表示这段代码在执行过 ...

  3. 编码与Python的基础

    编码 在linux 系统或者Python2版本中要用Python这门语言呢,就需要在开头加上 # -*- coding:utf8 -*- 这个语句是说呀,当机器编译你写的程序的时候是用utf-8这种编 ...

  4. Angular6.0发布

    Angular v6 新版本重点关注工具链以及工具链在 Angular 中的运行速度问题. Angular v6 是统一整体框架.Material 和 CLI 三大 Angular 组件的第一个版本, ...

  5. How to change from default to alternative Python version on Debian Linux

    https://linuxconfig.org/how-to-change-from-default-to-alternative-python-version-on-debian-linux You ...

  6. JAVA 语法2

    1.算术运算符 运算符 运算规则 范例 结果 + 正号 +3 3 + 加 2+3 5 + 连接字符串 "中"+"国" "中国" - 负号 i ...

  7. 大型EMR电子病历源码三甲医院医疗信息管理系统软件网络版

    详情请点击查看 开发环境 :VS2010 + C# + ORACLE系统简介:1各种记录的书写,并可保留修改痕迹 在各种记录的书写过程中,根据系统提供的首次护理记录.一般护理记录.术前术后护理记录等模 ...

  8. UE4中创建第一、第三人称角色,并进行角色间的切换

    在游戏中经常会出现第一人称和第三人称的视角切换场景,笔者在这里简单介绍如何进行这步操作. 1.创建角色 在内容浏览器中添加2个Character蓝图,分别命名为FirstPersonalCharact ...

  9. oozie: GC overhead limit exceeded 解决方法

    1.异常表现形式 1)  提示信息      Error java.lang.OutOfMemoryError: GC overhead limit exceeded 2)提示出错      Erro ...

  10. Win10 UWP开发系列:解决Win10不同版本的Style差异导致的兼容性问题

    最近在开发一个项目时,遇到了一个奇怪的问题,项目依赖的最低版本是10586,目标版本是14393,开发完毕发布到商店后,很多用户报无法正常加载页面.经查,有问题的都是Win10 10586版本. 我上 ...