純粋なCSSとJS（任意のjQueryなし）で特定のタイプのすべてのHTML要素にJSクラスを適用できますか？

JQueryや標準のJSとCSSを上回らないHTMLドキュメントが大好きですHTMLタグの特定のセットを単純に非表示にすることができます。私は、クラス 'hidden'と 'unhidden'を作成し、それらを非表示や表示したいタグに割り当てることで推測します。私はすべてのh1とh2の見出しを表示したいが、すべてのh3の見出しを隠したいとしているとします（ただし、テキストは前と同じ行に、ドキュメントの次のテキストはそのままです）。純粋なCSSとJS（任意のjQueryなし）で特定のタイプのすべてのHTML要素にJSクラスを適用できますか？

h1 { className: unhidden; } 
    h2 { className: unhidden; } 
    h3 { className: hidden; } 

    .hidden { display: none; } 
    .hidden { visibility: hidden; } 
    .unhidden { display: inline; } 
    .unhidden { visibility: visible; }

私は一緒にこれをモックアップするために、文書全体を入れているが、それは仕事を得ることができないと私はシンプルな何かが欠けています期待しています：

<html> 
    <head> 
     <script> 
      h1 { className: unhidden; } 
      h2 { className: unhidden; } 
      h3 { className: hidden; } 
      .hidden { display: none; } 
      .hidden { visibility: hidden; } 
      .unhidden { display: inline; } 
      .unhidden { visibility: visible; } 
     </script> 
    </head> 
    <body> 
     <h1>Some unhidden text</h1> <h2>More unhidden text</h2> <h3>this text is **hidden**</h3> 
    </body> 
</html>

H3タグはまだその中にテキストを表示。 :(任意のアイデア

出典

2017-05-13 Freementalist

クラス名を動的に追加または削除するには、動的にJavaScriptを使用する必要があります。サーバー側で動的に割り当てるには、サーバー側の言語を使用する必要があります。しかし、これはCSSの範囲を超えています。 –

これは有効なJSのようには見えません。また、 'query'関数を調べて、CSS構文を使って要素を選択します。 – Carcigenicate

があなたのH3にIDを割り当てた後、スクリプトでそれを使用する：

document.getElementById("myId").style.display = "none";

あなたはまたのgetElementsByClassNameやgetElementsByTagNameのを使用することができます。

出典

2017-05-13 23:56:45

それは素晴らしいと思うので、私は何かをすることができます：document.getElementsByTagName（ "h1"）。style.display = "none";私は今、おねがいします！ – Freementalist

すべてH3を隠します？例えば、

[].slice.call(document.querySelectorAll('h3')).forEach(function(el) { 
 
    el.className = 'hidden'; 
 
});

.hidden { display: none; } 
 
.hidden { visibility: hidden; } 
 
.unhidden { display: inline; } 
 
.unhidden { visibility: visible; }

<h1>Some unhidden text</h1> <h2>More unhidden text</h2> <h3>this text is **hidden**</h3>

出典

2017-05-14 00:09:53

純粋なCSSとJS（任意のjQueryなし）で特定のタイプのすべてのHTML要素にJSクラスを適用できますか？

答えて

関連する問題