HTML 숨기기 요소-HTML 튜토리얼-php.cn

HTML 숨기기 요소

PHPz

풀어 주다： 2024-09-04 16:42:32

원래의

498명이 탐색했습니다.

HTML5의 숨겨진 전역 속성은 부울 속성입니다. 이는 대상 요소가 HTML 문서와 더 관련이 있는지 여부를 규정합니다. 숨겨진 속성을 사용하는 한 가지 예는 사용자가 인증되지 않은 경우 승인되지 않은 HTML 웹 페이지에 있는 특정 콘텐츠를 가리거나 드러내는 데 사용할 수 있다는 것입니다. 그때까지 브라우저는 활성 숨겨진 속성(즉, 속성이 설정됨)이 있는 요소를 렌더링하지 않습니다.

숨겨진 속성 활용

숨겨진 속성을 사용하는 방법 중 하나는 일부 조건(예: 라디오 버튼 선택 등)이 충족될 때까지 사용자가 요소를 보지 못하게 하는 것과 같습니다. 그런 다음 JavaScript 코드는 숨겨진 속성을 다시 규정할 수 있습니다. , 따라서 요소가 표시됩니다. 이 속성은 개별 프리젠테이션에 대해서만 내용을 숨기는 데 사용되어서는 안 됩니다. 오히려 숨겨진 콘텐츠가 있는 경우 모든 프레젠테이션에 대해 동일한 상태를 유지해야 합니다.

숨겨진 콘텐츠는 숨겨지지 않은 콘텐츠나 아직 활성화된 숨겨진 콘텐츠의 하위 콘텐츠와 연결되어서는 안 됩니다. 이렇게 하면 양식 요소를 아직 제출할 수 있고 스크립트 요소를 실행할 수 있습니다. 그러나 스크립트와 요소는 다른 컨텍스트에 숨겨진 모든 콘텐츠를 참조할 수 있습니다.

실제 시나리오의 속성을 사용하여 숨겨진 속성으로 발음된 섹션에 연결합니다. 링크된 콘텐츠가 관련성이 없거나 적용 가능하지 않은 경우에는 함께 묶을 필요가 없습니다. Hidden 속성의 정의에 따라 숨겨진 속성을 사용하여 HTML 웹페이지에 있는 모든 콘텐츠를 숨길 수 있으며 나중에 JavaScript 코드를 사용하여 해당 콘텐츠에 액세스할 수 있습니다. 요소를 숨기려는 대상은 속성을 표시 속성으로 사용하여(즉, 없음으로 설정) CSS를 통해 달성할 수도 있지만 숨겨진 속성을 사용하는 것이 쉬운 방법입니다.

참고: 숨겨진 속성이 있는 요소의 CSS 표시 속성 값을 변경하면 해당 동작이 재정의됩니다. 예를 들어, display: flex 스타일의 요소는 숨겨진 속성이 있음에도 불구하고 표시됩니다.

구문

<element hidden> </element>

로그인 후 복사

HTML 숨기기 요소의 예

다음은 HTML 요소 숨기기의 예입니다.

예시 #1

코드:

<!DOCTYPE html>
<html>
<head>
<title>HTML hide element</title>
<style>
body {
text-align:center;
}
h1 {
color:blue;
}
</style>
</head>
<body>
<h1>EDUCBA</h1>
<h2>HTML Hide element</h2>
<!-- hidden paragraph -->
<p hidden>A learning portal</p>
</body>
</html>

로그인 후 복사

출력:

HTML 숨기기 요소

예시 #2

코드:

<!DOCTYPE html>
<html>
<head>
<title>HTML hide element</title>
<style>
body {
text-align:center;
}
h1 {
color:blue;
}
</style>
</head>
<body>
<h1>EDUCBA</h1>
<h2>HTML Hide element</h2>
<button id="btn">TOGGLE HIDDEN ELEMENTS</button>
<p id="p" hidden>This paragraph uses HTML5's             <code>hidde</code> element.</p>
<textarea id="ta" hidden rows="5" cols="40">This textarea was hidden using the hide element</textarea>
<!-- hidden paragraph -->
<p hidden>A learning portal</p>
<script>
document.getElementById("btn").addEventListener('click', function () {p.hidden = !p.hidden;ta.hidden = !ta.hidden;}, false);
</script>
</body>
</html>

로그인 후 복사

출력:

HTML 숨기기 요소

예 #3 – 속성의 유용성

Hidden 속성의 정의에 따라 숨겨진 속성을 사용하여 HTML 웹페이지에 있는 모든 콘텐츠를 숨길 수 있으며 나중에 JavaScript 코드를 사용하여 해당 콘텐츠에 액세스할 수 있습니다. 요소를 숨기려는 대상은 속성을 표시 속성으로 사용하여(즉, 없음으로 설정) CSS를 통해 달성할 수도 있지만 숨겨진 속성을 사용하는 것은 쉬운 방법입니다. 따라서 숨겨진 속성이 있는 콘텐츠는 DOM의 일부이지만 사용자는 이에 액세스할 수 없다고 말할 수 있습니다.

아래 예에서는 JavaScript 코드를 사용하는 숨겨진 요소의 일부:

코드:

<!DOCTYPE html>
<html>
<head>
<title>HTML hide element</title>
<style>
body {
text-align:center;
}
h1 {
color:blue;
}
</style>
</head>
<body>
<h1>EDUCBA</h1>
<h2>HTML Hide element</h2>
<button id="btn">DISPLAY HIDDEN TEXT</button>
<output id="op">(Hidden text will appear here)</output>
<textarea id="ta" hidden rows="5" cols="40">This textarea was hidden using the hide element</textarea>
<!-- hidden paragraph -->
<p hidden>A learning portal</p>
<script>
document.getElementById("btn").addEventListener('click', function () {op.innerHTML = ta.innerHTML;}, false);
</script>
</body>
</html>

로그인 후 복사

출력:

HTML 숨기기 요소

유의사항

숨겨진 속성과 상호작용하기 전에 잘 알아야 할 몇 가지 중요한 사항은 다음과 같습니다.

독립적인 해상도와 화면 크기에서 액세스할 수 있는 콘텐츠는 숨겨진 속성을 사용하여 콘텐츠를 숨겨서는 안 됩니다.
콘텐츠 전환기나 탭 구성 요소의 보이지 않는 부분을 숨기거나 덮는 데 숨겨진 속성을 활용하면 안 됩니다.
숨겨지지 않은 요소는 숨겨진 요소에 하이퍼링크로 연결되어서는 안 됩니다.
숨김으로 표시된 요소는 여전히 활성 상태일 수 있습니다.
모든 사용자로부터 콘텐츠를 숨기려면 HTML5 숨김 속성을 사용하세요(CSS 표시와 함께: 아직 숨김을 지원하지 않는 브라우저의 경우 없음). aria-hidden을 사용할 필요가 없습니다.