html - 设置在显示中可见的元素：无

Question

我想在一个display:none块中获取一个元素，有可能吗？

例如：

<div style="display:none" >
    <h2>hi all</h2>
    <p>abc</p>
</div>

我想显示h2将父母保留div在display:none.

有解决办法吗？

Answer 1

你不能。display: none根据定义，不显示元素的所有后代元素。引用CSS 规范：

9.2.4 “显示”属性

没有任何

该值导致元素不出现在格式化结构中（即，在视觉媒体中，元素不生成框并且对布局没有影响）。后代元素也不生成任何框；元素及其内容完全从格式化结构中删除。不能通过在后代上设置 'display' 属性来覆盖此行为。

Answer 2

使用您当前的 HTML 是不可能的。最好的做法是类似于以下内容

<div>
    <h2>hi all</h2>
    <div style="display: none;">
        <p>abc</p>
    </div>
</div>

Answer 3

如果您需要检索一些隐藏的值，您可以使用 JavaScript。id只需为您的元素添加一个独特的并检索它的值。这是一个jQuery方式（没有任何document.ready()东西）：

<div style="display:none" >
  <h2 id="show_me">hi all</h2>
  <p>abc</p>
</div>

<script>
  element = $('#show_me').html();
  alert(element)

  //Plain JS way would be something like this.
  element_js = document.getElementById('show_me').innerHTML;
  alert(element_js)
</script>

您本身并没有显示检索到的元素，但至少您能够显示它的内容并使用它做任何您喜欢的事情。实际上，我认为这将是获取隐藏元素最接近的方法。