以往写显示隐藏效果时，一般都习惯将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>
原文地址：https://www.cnblogs.com/samfung/p/9090040.html
时间： 2024-10-18 02:48:01