Question

我有一连串像这样的元素：

<div>

根据用户的工作流程，我需要停用部分display:block并稍后再启用它们。因此，用户可以查看和访问它们。这可以通过CSS display:none和<span>轻松实现。

只要我只有一些<div>块，我就可以在一个简单的javascript循环中打开和关闭mysite.com/foobar。到现在为止还挺好。但是当块的数量增长到任意数量时，这种方法就没有意义了。

所以我了解到可以打开完整的样式表。查看示例here。在我开始深入研究这种先进技术之前，我有这个问题：

当我向DOM添加和删除样式表时，它们的属性是否会立即应用？换句话说，我可以使用这种方法来隐藏和显示页面中的一整套元素吗？

Answer 1

当我向DOM添加和删除样式表时，它们的属性是否会立即应用？

是

换句话说，我可以使用这种方法来隐藏和显示页面中的一整套元素吗？

你可以，但你几乎肯定不会想要。

要控制整个元素集的样式，最简单的方法是定义与您想要影响的元素匹配的规则，然后执行启用/禁用该规则的操作。例如，在您的情况下，您可以通过定义隐藏div隐藏span class="widget"内的所有span.hide-divs div { display: none; }元素：

span

...然后根据需要将该类添加/删除到包含div。

以下是包含一堆跨度的document.querySelector(".stuff").addEventListener("click", function() { this.classList.toggle("hide-spans"); }, false);的示例，其中在div上添加/删除类隐藏/显示跨度：

＆＃13;

div.stuff.hide-spans span {
  display: none;
}

＆＃13;

<div class="stuff">
  <em>Click the div to toggle (this isn't a span, so it won't get hidden)</em>
  <span>span one</span>
  <span>span two</span>
  <span>span three</span>
</div>

＆＃13;

classList

＆＃13;

注意：该示例使用addEventListener，这可能需要旧浏览器上的垫片。它还使用div，IE8及更早版本不支持span。这只是为了保持简短。

附注：将sessionInfoBean作为null的直接子项无效。 here为The content model of span，但phrasing content为context where div can be used。

动态添加和删除DOM的样式表

1 个答案: