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

HTMLDOMの詳細オープンプロパティ

HTML DOM Details openプロパティは、HTML

openプロパティに関連付けられています。これはブール属性であり、詳細をユーザーに表示するかどうかを指定するために使用されます。 trueに設定すると、詳細がユーザーに表示されます。ただし、falseに設定すると、ユーザーから詳細を非表示にすることを意味します。

構文

以下は、-

の構文です。

詳細オープンプロパティの設定-

detailsObject.open = true|false

ここでは、true =詳細が表示され、false=詳細は非表示になります。詳細はデフォルトで非表示になっています。

例

詳細オープンプロパティの例を見てみましょう-

<!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>

出力

これにより、次の出力が生成されます-

HTMLDOMの詳細オープンプロパティ

「表示」ボタンをクリックすると-

HTMLDOMの詳細オープンプロパティ

上記の例では-

IDが「Details1」の 

<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（）を使用して

要素を取得し、そのopen属性値をtrueに設定します。これにより、
内の情報がユーザーに表示されます-

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

  1. HTMLDOMoffsetWidthプロパティ

    HTML DOM offsetWidthプロパティは、パディング、境界線、スクロールバーを含む要素の幅に対応する数値を返しますが、マージンは返しません。 以下は構文です- 数値を返す HTMLelement.offsetWidth HTML DOM offsetWidthの例を見てみましょう プロパティ- 例 <!DOCTYPE html> <html> <head> <title>HTML DOM offsetHeight</title> <style>    form {   &n

  2. HTMLDOMoffsetParentプロパティ

    HTML DOM offsetParentプロパティは、子オフセットが定義されている参照された親要素を返します。 以下は構文です- 参照されたオフセット親要素を返す HTMLelement.offsetParent HTML DOM offsetParentの例を見てみましょう。 プロパティ- 例 <!DOCTYPE html> <html> <head> <title>HTML DOM offsetParent</title> <style type="text/css">   &n