HTML DOM 세부 정보 열기 속성

<시간/>

HTML DOM 세부 정보 열기 속성은 HTML <세부 정보> 열기 속성과 연결됩니다. 부울 속성이며 세부 정보가 사용자에게 표시되어야 하는지 여부를 지정하는 데 사용됩니다. true로 설정하면 세부 정보가 사용자에게 표시됩니다. 그러나 false로 설정하면 사용자에게 세부 정보를 숨길 수 있습니다.

구문

다음은 −

의 구문입니다.

세부 정보 열기 속성 설정 -

detailsObject.open = true|false

여기에서 true=Details가 표시되고 false=Details가 숨겨집니다. 세부 정보는 기본적으로 숨겨져 있습니다.

예시

세부 정보 열기 속성의 예를 살펴보겠습니다 −

<!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 세부 정보 열기 속성

"표시" 버튼 클릭 시 -

HTML DOM 세부 정보 열기 속성

위의 예에서 -

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;
}