html - display:none に表示される要素を設定する

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」プロパティ

無し

この値により、要素はフォーマット構造に表示されなくなります（つまり、ビジュアルメディアでは、要素はボックスを生成せず、レイアウトに影響を与えません）。子孫要素もボックスを生成しません; 要素とそのコンテンツは、フォーマット構造から完全に削除されます。この動作は、子孫に「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>

取得した要素自体を表示しているわけではありませんが、少なくともその内容を表示して、好きなことを行うことができます。実は隠し要素の取り出しはこれが一番近いと思います。