使用 hide、prop、attr 或 css 与 JQuery 隐藏元素之间的区别

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 看到了一些解释，但我想知道是否有人可以提供更多信息，主要是什么时候应该使用哪个？？

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);

这完全取决于您的编码风格。如果它们都有效，那么您就可以使用您最喜欢的那个。如果可能，请尽量保持一致，恕我直言。

Answer 2

肯定有区别，但我不会全部介绍。

一个真实的故事：

我刚刚有一个项目，我需要通过显示属性过滤 DOM 元素。 通过使用 .hide() 将相同的 DOM 元素设置为“none”并通过设置 .show() 显示

这种用法虽然简短而简洁，但在按显示属性过滤时会产生问题，因为它总是在控制台输出中显示“无”。即使元素列表显示“块”。 因此使用 .hide() 会发生缓存

你不只是想用你最喜欢的东西。仅当您最喜欢最适合您的特定需求时；）