웹 응용 프로그램에서 어떤 요소나 구성 요소를 표시하거나 숨기는 것은 자주 해야 할 일이다. 특히 현재 유행하는 단일 응용 프로그램에서.
총체적으로 말하면 3가지 방식으로 실현된다

CSS의 display: none;

CSS의visibility:hidden;

HTML5의 hidden 속성(boolean)

그것들 사이에는 공통점과 차이점이 있다.공통점은 매우 간단하다. 이 속성을 추가한 원소와 그 하위 원소를 보이지 않게 할 수 있다.이 글은 그것들 사이의 차이를 비교하는 데 중심을 두었다.
display: none;
이 속성이 추가된 요소:

페이지 공간을 차지하지 않습니다(레이아웃에 영향을 주지 않습니다). 이 속성은 이 요소를 보이지 않게 하는 것이 아니라 렌더링하지 않기 때문입니다

DOM API를 통해

예를 들어 그것을 디스플레이:block으로 바꾸기;

visibility: hidden;
이 속성이 추가된 요소:

여전히 페이지 공간을 차지하고 (레이아웃에 영향을 주며) 요소를'투명'하게 하고 그리지 않을 뿐이다

DOM API를 통해

예를 들어visibility:visible로 바꾸기;

HTML5 hidden
E.g.hello, world!에 이 속성의 요소가 추가되었습니다.

페이지 공간을 차지하지 않음(배치에 영향을 주지 않음), 렌더링되지 않음

어떤 상황에서 사용합니까?

이 요소가 현재 페이지 상태와 관련이 없을 때

이 요소는 페이지의 다른 요소에 의해 중복 사용되고 사용자에게 직접 보여주는 것이 아니라 특정한 정보를 제공하는 데 사용된다

한 마디로 하면 이 요소가 사용자에게 가져오지 않을 때 사용해야 한다.(이 때문에 이 요소를 href에 연결할 수 없습니다)

대비display: none;의 장점은 display: none;를 사용하면 디스플레이를 복원하려면 어떤 값으로 복원해야 하는가?Block이요?flex요?확실하지 않다.그러나 HTML5의 Hidden 속성을 사용하면 이 문제가 존재하지 않습니다.

사용 편의성(Accessibility)에 하이든이 표시된 요소는 리더가 읽지 않습니다.

이 속성은 사실 CSS로 이루어졌기 때문에 HTML 히든 속성을 가진 요소에 CSS 디스플레이 속성을 추가하면 이 디스플레이 속성은 HTML 히든 속성을 덮어씁니다.

영어 읽기 능력이 있는 학생은 W3C 문서에 가서 더 상세한 설명과 용례를 볼 수 있다

문서에서 추출한 용례 중 하나:

The Example Game

  
Login
  

    ...
    
  
  
    function login() {
      // switch screens
      document.getElementById('login').hidden = true;
      document.getElementById('game').hidden = false;
    }
  

총결산
모든 용법은 자신의 우세와 열세를 가지고 구체적인 업무 상황에 따라 어떤 방식을 선택해야 한다.만약 잘못이나 누락이 있으면 지적을 환영합니다. 감사합니다.