요소 숨김 : 자바 스크립트 속성과 CSS 스타일의 차이점

Question

JavaScript 속성 또는 CSS 스타일을 사용하여 요소를 숨길 때 결과에 ​​차이가 있는지 궁금합니다. 예를 들어

:

element.setAttribute("hidden", true); 

element.style.visibility = "hidden"; 

대 나는 그 두 가지 가능성을 조금 실험. JavaScript를 사용하여 숨기면 요소가 숨겨지고 흐름에서 빠져 나옵니다. 그리고 CSS 스타일을 사용하여 숨어지면 요소가 표시되지 않고 그대로 유지됩니다.

대개 이것은 내 실험에서 보였지만, 때로는 그렇지 않았습니다. 그렇다면이 두 가지 가능성의 실제 차이점은 무엇입니까?

Answer 1

두 가지 기본적인 방법이있다 CSS로 요소를 숨기기 :

먼저, visibility: hidden; (또는 element.style.visibility = "hidden";)이 있습니다. 이것은 단순히 항목을 보이지 않게합니다. 여전히 문서에서 공간을 차지하지만 여전히 흐름의 일부입니다.

그렇다면 display: none; (또는 element.style.display = "none";)입니다. 이렇게하면 요소가 문서 흐름에서 완전히 제거됩니다. DOM에 여전히 존재하며 페이지에 렌더링되지 않습니다.

HTML5의 hidden attribute (또는 element.setAttribute("hidden", true);)은 대략 display: none;과 같습니다. 사실

이 종종 스타일 시트에 추가, 속성과 오래된 브라우저 호환성을 제공합니다 :

실제로 완전히 다른 짐승의

[hidden] { display: none; } 

Answer 2

이 두 코드 줄의 차이점 중 하나는 주어진 값으로 요소에 특성을 추가하는 반면 다른 하나는 스타일 선언 내에서 속성을 설정한다는 것입니다.

예 :

요소 변수가 div라고 가정 해 보겠습니다. 당신이

element.setAttribute("hidden", true); 

를 호출 할 때 요소는 지금과 같이 표시됩니다 :

<div hidden="true"></div> 

당신이 호출 할 때

element.style.visibility = "hidden"; 

당신은 얻을 것이다 :

는

<div style="visibility: hidden;"></div>