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

HTML DOM Details openプロパティの使い方を徹底解説

Details openプロパティとは

HTML DOMのDetails openプロパティは、HTMLの<details>要素が持つopen属性に関連付けられたプロパティです。この属性はブール値（true/false）を取り、<details>要素内の詳細情報をユーザーに表示するかどうかを指定します。

trueを設定すると詳細内容が表示され、falseを設定すると非表示になります。デフォルト状態では、詳細は非表示になっています。

構文

Details openプロパティを設定するための構文は以下のとおりです。

detailsObject.open = true|false

true = 詳細を表示、false = 詳細を非表示、という意味になります。初期状態では詳細は隠されています。

サンプルコード

Details openプロパティの具体的な使用例を見てみましょう。

<!DOCTYPE html>
<html>
<body>
<h2>Details open() property</h2>
<details id="Details1">
<summary>Eiffel Tower</summary>
<p style="color:blue">The Eiffel Tower is a wrought-iron lattice tower on the Champ de Mars in Paris, France.
It is named after the engineer Gustave Eiffel, whose company designed and built the tower. </p>
</details>
<p>Click the below button to set the details to be visible to the user</p>
<button onclick="setDetail()">Visible</button>
<script>
    function setDetail() {
        document.getElementById("Details1").open = true;
    }
</script>
</body>
</html>

実行結果

上記のコードを実行すると、次のような画面が表示されます。

HTML DOM Details openプロパティの使い方を徹底解説

「Visible」ボタンをクリックすると、詳細内容が展開されて表示されます。

HTML DOM Details openプロパティの使い方を徹底解説

コードの解説

この例では、以下のような処理を行っています。

まず、id「Details1」を持つ<details>要素を作成し、その中に<summary>要素と、説明文を含む<p>要素を配置しています。

<details id="Details1">
<summary>Eiffel Tower</summary>
<p style="color:blue">The Eiffel Tower is a wrought-iron lattice tower on the Champ de Mars in Paris, France.
It is named after the engineer Gustave Eiffel, whose company designed and built the tower.
</p>
</details>

次に、ユーザーがクリックするとsetDetail()関数を実行する「Visible」ボタンを作成しています。

<button onclick="setDetail()">Visible</button>

setDetail()関数は、getElementById()メソッドを使って<details>要素を取得し、そのopen属性の値をtrueに設定します。これにより、<details>要素内の情報がユーザーに表示されるようになります。

function setDetail() {
    document.getElementById("Details1").open = true;
}

  1. HTML DOM offsetWidthプロパティの使い方をわかりやすく解説

    HTML DOM offsetWidthプロパティとは HTML DOMのoffsetWidthプロパティは、要素の実際の表示幅に対応する数値(ピクセル単位の整数)を返します。この幅にはパディング・ボーダー(境界線)・スクロールバーが含まれますが、マージンは含まれません。なお、offsetWidthは読み取り専用のプロパティのため、値を直接代入することはできません。 構文 HTMLElement.offsetWidth 要素が非表示(display: none など)の状態にある場合は、0 が返されます。 関連プロパティとの違い offsetWidth: パディング+ボーダー+スクロールバー

  2. 【初心者向け】HTML DOMのoffsetParentプロパティの使い方とサンプルコード

    offsetParentプロパティとは HTML DOM の offsetParent プロパティは、対象要素のオフセット（相対的な位置）がどの親要素を基準として定義されているかを示し、その基準となる親要素への参照を返します。 具体的には、CSS の position プロパティ（relative / absolute / fixed / sticky）が指定された最も近い祖先要素が基準となります。該当する要素が存在しない場合は <body> 要素が返されます。また、テーブルセル内の要素であれば <td> や <table> などのテーブル関連要素が基準にな