设置显示中可见的元素:none

Question

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

例如：

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

我想显示保持父div在display:none中的h2。

有解决方案吗？

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>

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