SQL見るだけクエリ#291 特定の要素を非表示にするためのJavaScript

記入日：2023-10-26　編集日：2023-10-26

特定の要素を非表示にするためのJavaScriptに関して解説してみようと思います。

特定の要素を非表示にするJavaScript

以下のJavaScriptのコードは、特定の要素を非表示にするためのものです。 コードの内容とそれぞれの行の解説を示します。

const hiddenElements = [
  "element-1",
  "element-2",
  "element-3"
];

hiddenElements.forEach(elementId => {
  const element = document.getElementById(elementId);
  element.style.display = "none";
});

この部分は、非表示にしたい要素のIDが列挙された配列を作成しています。

const hiddenElements = [
  "element-1",
  "element-2",
  "element-3"
];

この部分は、配列 hiddenElements の各要素に対して処理を行います。

hiddenElements.forEach(elementId => {
  const element = document.getElementById(elementId);
  element.style.display = "none";
});

• hiddenElements.forEach(...) は、hiddenElements 配列の各要素に対して、指定した関数を実行します。
• elementId は、配列の要素を表します。
• const element = document.getElementById(elementId); は、elementId で指定されたIDを持つ要素を取得します。
• element.style.display = "block"; は、取得した要素のスタイルの中の display プロパティを "block" に設定します。これにより、その要素が非表示になります。

つまり、このコードは hiddenElements 配列に列挙された各要素のIDを持つ要素を非表示にするものです。

例えば、もしも hiddenElements 配列が以下のようになっていた場合:

const hiddenElements = [
  "element-1",
  "element-2",
  "element-3"
];

それぞれのIDを持つ要素が非表示にされます。

例えば、以下のHTMLがあるとします：

<div id="element-1">Element 1</div>
<div id="element-2">Element 2</div>
<div id="element-3">Element 3</div>

このコードが実行されると、id が "element-1"、"element-2"、"element-3" の要素は非表示になります。