show()封裝沒有想象中那麽簡單
阿新 • • 發佈：2018-05-25
block iframe 節點 else select highlight content tco fault
以往寫顯示隱藏效果時，一般都習慣將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()封裝沒有想象中那麽簡單