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

JavaScriptで特定のテキストを含むdivを非表示にしますか？

最初に、getElementsByClassName（）を使用してdivクラスを抽出し、forループを反復処理し、OR条件を使用して特定のテキストを表示する必要があります。

また、yourDiv.style.display =’none’を設定します。

以下はJavaScriptコードです-

例

<!DOCTYPE html>
<html lang="en">
<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>

上記のプログラムを実行するには、ファイル名 anyName.html（index.html）を保存します 。ファイルを右クリックし、VSコードエディターでライブサーバーで開くオプションを選択します。

出力

JavaScriptで特定のテキストを含むdivを非表示にしますか？


  1. JavaScriptを使用して選択したdivでのみクラスを非表示に切り替えますか？

    選択したdivでのみ非表示クラスを切り替えるには、クリックボタンでイベントを設定する必要があります。 +記号をクリックして特定の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のスクリーンショットを撮る方法

    ウェブサイトをレイアウトするマークアップの一部をキャプチャ（画像に変換）し、キャプチャした画像を保存するか、何かを行う必要があります。したがって、この説明された動作を実現するための方法を考案する必要があります。 問題には、キャンバスだけでなくマークアップ要素のキャプチャも含まれるため、特に最初からキャプチャする場合は、少し複雑になります。したがって、簡単にするために、サードパーティのライブラリ htmltocanvasを使用します。 これは、名前が示すとおりに機能し、目的のマークアップをキャンバスに変換します。その後、キャンバス要素を画像としてダウンロードするだけです。 例 そのた