研究jQuery的show()的display屬性

時間 2019-11-16

原文原文鏈接

1.問題現象 javascript

在個人項目中原本有一個標籤原本是inline元素，可是我把他的display設置成了inline-block，後面就是我有隱藏和顯示的切換，結果先隱藏一次，再一次切換到顯示就出了問題。
css

效果圖以下，咱們
html

當隱藏以後，在切換回來，效果以下圖：java

下面是那個自定義那個框裏面的小三角的HTML和樣式，後面那個日期圖標的樣式就不看了，基本原理是同樣的jquery

<span id="deletSel" class="btnSelect"></span>

下面圖正常時候的樣式，沒有隱藏以後在顯示的狀況ide

下面圖是點擊的隱藏以後，在顯示的樣式，咱們能夠看到多了一個display爲block的樣式，去掉這個樣式就正常了函數

從這個能夠看出，jQuery會改變元素你所設置的樣式。測試

2.解決辦法：在你調用show()函數以後，接着調用css()函數設置成你原本要設置的display屬性，代碼以下：spa

$("#deletSel").show().css("display","inline-block");

3.透過現象看本質。code

我在網上找了一些資料，別人都說，調用了show()函數以後那個display屬性會恢復到該標籤默認的display屬性，而後我測試了，發現不對。

結論：show()函數通常會回覆到你設置的樣式的display的屬性，例如就算是inline元素，你把他的display設置成block或者inline-block，show()以後仍是這個樣式。

代碼以下：

<html>
<head>
<style type="text/css">
.common
{ 
    display:inline-block;
}
</style>
<!--script type="text/javascript" src="jquery-2.1.1.min.js"></script-->
<script type="text/javascript" src="jquery-1.10.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $("#showq").click(function(){
    $("span").show();
});
$("#hiden").click(function(){
$("span").hide();
});
});
</script>
</head>
<body>
<span class="common">相濡以沫，不如相忘於江湖</span>
<span class="common">你們好</span>
<button id="showq">顯示</button>
<button id="hiden">隱藏</button>
</body>
</html>

現象

最開始的狀況

調用show()以後的樣式，看到他記住了你設置的樣式

可是問題出來了，那咱們那個元素設置的display屬性爲何沒有記住了，緣由是你設置了一個position：absolute屬性，這個元素浮動起來了，脫離的文檔流，show()以後的display屬性就是block了，

下面是給這個例子加上position：absolute樣式

下圖是剛開始正常的樣式

下面是調用了show()函數以後的樣式。

後面我又研究了float屬性，當設置了float屬性，show()函數調用以後display也是block，因此咱們之後注意對於脫離了文檔流的元素，咱們調用了show()函數以後，再自定義一下display屬性。