JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptで特定のテキストを含むdiv要素を非表示にする方法

JavaScriptで「header」や「footer」など、特定のテキストを含むdiv要素だけを非表示にしたいケースはよくあります。本記事では、その実現方法をサンプルコード付きでわかりやすく解説します。

基本的な考え方

まず、getElementsByClassName()メソッドを使って対象となるクラス名を持つdiv要素のコレクションを取得します。次に、forループで各要素を順番に反復処理し、OR条件（||）を使って要素内のテキストが特定の文字列と一致するかどうかを判定します。

条件に一致した要素に対しては、yourDiv.style.display = 'none'を設定することで、画面上から非表示にできます。

サンプルコード

以下が実際のJavaScriptコードです。

例

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div class="block">
header
</div>
<div class="block">
content
</div>
<div class="block">
footer
</div>
<script>
   let attribute = document.getElementsByClassName('block');
   for (let i = 0; i < attribute.length; i++) {
      let impDiv = attribute[i];
      let value = impDiv.innerHTML.trim();
      if (value == 'header' || value == 'footer') {
         impDiv.style.display = 'none';
      }
   }
</script>
</body>
</html>

コードのポイント

  • document.getElementsByClassName('block')：クラス名「block」が付いたすべてのdiv要素を取得します。
  • impDiv.innerHTML.trim()：要素内のHTMLテキストを取得し、前後の余分な空白を取り除いて正確に比較できるようにしています。
  • value == 'header' || value == 'footer'：テキストが「header」または「footer」と一致した場合にのみ処理を実行するOR条件です。
  • impDiv.style.display = 'none'：該当するdiv要素を画面から非表示にします。「content」のdivだけが表示されたままになります。

実行方法

上記のプログラムを実行するには、ファイル名をanyName.html（index.html）として保存します。その後、VS Codeエディタでファイルを右クリックし、「Open with Live Server」を選択してブラウザで開いてください。

出力結果

プログラムを実行すると、テキストが「header」と「footer」である2つのdiv要素が非表示になり、「content」を含むdiv要素のみがブラウザに表示されます。

JavaScriptで特定のテキストを含むdiv要素を非表示にする方法

  1. JavaScriptで選択したdivだけにhideクラスを切り替える方法

    選択したdivのみにhideクラスをトグル（切り替え）するには、クリックイベントを設定する必要があります。ここでは、「+」マークをクリックしたときに特定のdivを非表示にするケースを想定して解説します。「+」や「-」のフォントアイコンを表示するには、あらかじめFont Awesomeをリンクしておきましょう。<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fontawesome/4.7.0/css/font-awesome.min.css">以下は、「+」

  2. JavaScriptでdiv要素のスクリーンショットを撮る方法!html2canvasの使い方を徹底解説

    Web開発において、サイトのレイアウトを構成するHTML要素の一部を画像としてキャプチャし、その画像を保存したり別の用途に活用したいというニーズはよくあります。本記事では、JavaScriptを使ってdiv要素などをスクリーンショットとして撮影する方法を解説します。 html2canvasライブラリを使う 今回の要件はcanvas要素だけでなく、任意のHTML要素をキャプチャ対象とする点がポイントです。CSSによる描画結果を自力で再現しようとすると実装が非常に複雑になるため、ここではサードパーティ製ライブラリのhtml2canvasを利用します。 html2canvasは、その名の通り指定した