javascript - 使用 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);

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