如何.css('display'）是block，[0].hidden是false，.is(':h

How can .css('display') be block, [0].hidden be false, and .is(':hidden') be true?

本文关键字：hidden false is block display css 如何      更新时间：2023-09-26

我遇到了一种情况，即div被隐藏，尽管我刚刚执行的代码显示了具有相同后缀的所有其他div：$("[id$='-input-container']").show()

不管怎样，有一个特定的div仍然是隐藏的：$("#single-colorRange-color-input-container")。我想它可能隐藏在代码后面的某个地方，但没有——在调用$inputContainers.show()之后，我立即添加了日志记录，如下所示（debugger语句停止所有后续执行）：

console.log($("#single-colorRange-color-input-container").css('display'));      
$inputContainers.show();
console.log($("#single-colorRange-color-input-container").css('display'));
console.log($("#single-colorRange-color-input-container")[0].hidden);
console.log($("#single-colorRange-color-input-container").is(':hidden'));
debugger;

在调用.show()之前，第一个none被记录为css/显示值。这是意料之中的事。

然后在调用.show()之后，将block记录为css/显示值。这是意料之中的事。

然后false被记录为结果集的第一个（唯一的）元素的hidden属性。这是意料之中的事。

则作为调用CCD_ 12的结果，记录CCD_。这是意外的。

.css('display')怎么可能是块，[0].hidden怎么可能是假，.is(':hidden')怎么可能是真？尽管调用了.show()，但div实际上是隐藏的，如果有合理的解释，那么仅为这一个div添加特殊逻辑对我来说似乎是荒谬的。

根据jQuery文档，对于以下任何情况，隐藏选择器都可以返回true

  • 它们的CSS显示值为none
  • 它们是type="hidden"的表单元素
  • 它们的宽度和高度明确设置为0
  • 祖先元素是隐藏的，因此该元素不会显示在页面上

由于隐藏是一个非常简单的布尔值，而显示是块，我猜测这是由于最后三个中的一个，特别是最后一点。确保所有祖先都可见。

元素的祖先可能被隐藏，因此.is()可能返回true。

element.hidden仅在元素具有html5隐藏属性时求值。

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden

此属性不能用于隐藏可能合法地显示。例如，它不应该用于隐藏选项卡选项卡式界面的面板，因为这是一个样式决策另一种显示它们的样式将导致一个完全正确的页面。

jquery隐藏是对对象可见性的评估

  • 它们的CSS显示值为none
  • 它们是type="hidden"的表单元素
  • 它们的宽度和高度明确设置为0
  • 祖先元素是隐藏的，因此该元素不会显示在页面上

https://api.jquery.com/hidden-selector/

console.log($("#sic").css("display")); // Add css #sic { display : }

它显示html标记的默认属性。这意味着如果标签是块，它将是块，如果它是隐藏的，那么它将是无。

示例：

1.）

<div id="sic">Hello</div>
console.log($("#sic").css("display")); // OUTPUT : block

2.）

<div style="display:none" id="sic">Hello</div>
console.log($("#sic").css("display")); // OUTPUT : none

结果：

console.log($("#sic").css("display")); // It create the css like #sic{display: }

使用CSS的全部属性，如果.is(':hidden') ，您将不会得到true

在你的情况下：我更改id值太长了。

<div id="sic">Hello
</div>

#sic {
  display : none;
}

console.log($("#sic").css("display")); // None
console.log($("#sic")[0].hidden); // false
console.log($("#sic").is(':hidden')); // true

只需写出完整的属性。

console.log($("#sic").css("display","block")); // displaying html
console.log($("#sic")[0].hidden); // false
console.log($("#sic").is(':hidden')); // false
相关文章：