研究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属性。

1. display的属性
2. jquery控制span的display属性为 none
3. CSS的display属性
4. CSS属性中的display属性浅谈；
5. CSS--- display属性的属性值
6. 关于UIView的autoresizingMask属性的研究
7. CSS display属性
8. display属性
9. CSS display 属性
10. Bootstrap display属性
更多相关文章...
• ASP ASPError 对象的属性 - ASP 教程
• jQuery Mobile Data 属性 - jQuery Mobile 教程
• 互联网组织的未来：剖析GitHub员工的任性之源
• 漫谈MySQL的锁机制