display = "show" 是一回事吗？ [关闭]

Posted 2023-02-22

【中文标题】display = "show" 是一回事吗？ [关闭]

【英文标题】：Is display = "show" a thing? [closed]

【发布时间】：2021-10-03 10:32:53

【问题描述】：

我正在学习 javascript，在查看一些用于根据条件显示/隐藏无序列表项的代码时，他们有：

 myArray[i].style.display = "show";

我明白了

style.display = "block"

但我找不到关于“show”的任何文档。这是 JavaScript 特有的属性吗？我在任何地方都找不到“显示”的 CSS 属性。但它有效。

【问题讨论】：

不是属性。如果可行，浏览器可能会假定 block 或 inline-block 因为该选项无效

不是 CSS 中 display 属性的属性

这是 JS 中的一个错误。浏览器可能会忽略它，并将其视为元素根本没有 display 属性。由于默认是显示元素，它恰好可以工作。

developer.mozilla.org/en-US/docs/Web/CSS/display

这可能是编写它的人的错误，很可能是要添加一个名为show或display: block或visibility: visible;的类

【参考方案1】：

display:show 绝不是 CSS 或 JavaScript 样式显示属性中的属性。 Here 您可以查看显示样式属性的所有可能值，其中显示不是其中之一。

但你可能是指名为 show 和 hide 的 jQuery 函数。

是的，您可以在这里了解更多关于它们的信息 .show() 和 .hide() ，祝你好运！

【参考方案2】：

display: show 不是有效的 CSS 语法和属性。您可以改用inline block...。

您也可以使用visibility 和opacity，它们还有其他用例，但我们可以说它们有点相同。你可以阅读它here。

const section = document.querySelector('section');

document.querySelector('.show').addEventListener('click', () => 
  section.style.display = 'block';
  
)

document.querySelector('.hide').addEventListener('click', () => 
  section.style.display = 'none';
  
)

section 
  width: 100px;
  height: 100px;
  background-color: orange

<section></section>
<button class="show">Show</button>
<button class="hide">Hide</button>