使用JQuery中的hide、prop、attr或css来隐藏元素的区别。

Question

我已经设置了4个div来测试使用以下不同的结果：

$("#div1").hide();
$("#div2").prop("hidden", true);
$("#div3").css("display","none");
$("#div4").attr("hidden", true);

我可以看到结果是（我使用的是1.11.3版本）：

<div id="div1" style="display: none;">Something</div>
<div id="div2" hidden="">Something</div>
<div id="div3" style="display: none;">Something</div>
<div id="div4" hidden="hidden">Something</div>

对我来说，有四种不同的方式实现基本上相同的结果似乎有些令人困惑。我在.hide() or display: none? jQuery中看到了一些解释，但我想知道是否有人可以提供更多信息，主要是在什么情况下应该使用哪个方法？

- Rodrigo

---

“hidden”是比较新的，它的属性映射到prop，就像“title”一样，所以“both”prop+attr看起来是一样的…….hide()是一个快捷方式。但我认为最好的方法是使用类，在Bootstrap中.hidden很有效。 - dandavis

你没有看到第一个答案吗？它就在那里。“这大致相当于调用.css('display', 'none')”。 - Sterling Archer

Answer 1

//this is a wrapper function.  simply adds display none inline.  for ease of use
$("#div1").hide();
//prop is used to manipulate any property on the object.  hidden is a property.  so it doesn't stop you from doing it.
$("#div2").prop("hidden", true);
//css is a wrapper for the style attribute.  display is a valid css property so it won't stop it
$("#div3").css("display","none");
//this one seems odd.  i thought it would be hidden="hidden"  but anyway.  attr() is used to change the attributes on the markup.  hidden is a valid attribute so it doesn't stop you
$("#div4").attr("hidden", true);

这完全取决于你的编码风格。如果它们都能正常工作，那么你可以使用你最喜欢的那个。只要尽可能保持一致，我的看法是。

- Taplar

Answer 2

的确存在一些差异，但我并不打算将它们都涵盖。

一个真实的故事：

我刚刚完成了一个项目，在该项目中我需要通过元素的display属性进行过滤。 有一些DOM元素被设置为'none'，通过使用.hide()进行隐藏和通过设置.show()进行显示。

虽然这种用法短小精悍，但在按display属性进行过滤时会出现问题，因为它总是在控制台输出中显示为“none”，即使元素列表显示为“block”。 所以使用.hide()就会发生缓存。

你不应该只是使用自己最喜欢的方法。只有当你最喜欢的方法适合你特定的需求时才使用 ;)

- Martin L Hansen

---

欢迎来到SO。本帖不涉及问题中提出的技术问题。请参阅https://stackoverflow.com/help/how-to-answer。 - Nick