자바스크립트 숨기기 버튼

1. 가시성 속성을 사용하여 JavaScript에서 버튼 숨기기
2. 디스플레이 속성을 사용하여 JavaScript에서 버튼 숨기기

오늘 포스팅에서는 자바스크립트에서 버튼 숨기기에 대해 알아보겠습니다.

가시성 속성을 사용하여 JavaScript에서 버튼 숨기기

CSS 속성 가시성은 문서의 레이아웃에 영향을 주지 않고 요소를 표시하거나 숨깁니다.

통사론:

visibility: hidden;

요소 상자는 보이지 않지만 평소와 같이 레이아웃에 영향을 줍니다. 가시성이 visible로 설정된 경우 요소의 자손이 표시됩니다.

요소에 숨김 가시성 값을 사용하면 접근성 트리에서 해당 요소가 제거됩니다. 결과적으로 화면 판독기 기술은 더 이상 요소와 모든 하위 요소를 알리지 않습니다.

가시성 값은 visible과 invisible 간에 전환됩니다. 따라서 시작 또는 끝 값 중 하나가 표시되어야 하며 그렇지 않으면 보간을 수행할 수 없습니다.

이 값은 불연속 단계로 보간되어 0과 1 사이의 시간 함수 값을 보이는 끝점에 할당하고 다른 시간 함수 값을 가장 가까운 끝점에 할당합니다.

속성에 대한 자세한 정보는 Visibility 문서에서 찾을 수 있습니다.

visibility 속성을 사용하여 JavaScript에서 버튼을 표시하거나 숨기는 예를 들어 보겠습니다.

<input type="button" id="btn-1" value="Show" onClick="hideAction()" />
<input type="button" id="btn-2" value="Hide" onClick="hideAction()"/>

let hidden = false;

function hideAction() {
  hidden = !hidden;
  if (hidden) {
    document.getElementById('btn-1').style.visibility = 'hidden';
  } else {
    document.getElementById('btn-1').style.visibility = 'visible';
  }
}

위의 예에서 두 개의 버튼을 정의했습니다. 토글 버튼 값에 따라 첫 번째 버튼이 표시되고 숨겨집니다.

두 번째 버튼은 이전 버튼의 가시성을 토글합니다.

JavaScript를 지원하는 모든 브라우저에서 위의 코드 스니펫을 실행하십시오. 아래 결과가 표시됩니다.

출력:

숨기기 버튼:

디스플레이 속성을 사용하여 JavaScript에서 버튼 숨기기

CSS 디스플레이 속성은 요소가 블록 또는 인라인 요소로 처리되는지 여부와 하위 요소(예: B. Flow, Grid 또는 Flex 레이아웃)에 사용되는 레이아웃을 결정합니다.

통사론:

display: block;
display: none;

디스플레이 속성은 요소의 내부 및 외부 디스플레이 유형을 지정합니다. 외부 유형은 흐름 레이아웃에서 요소의 참여를 결정합니다. 내부 유형은 아이의 디자인을 설정합니다.

일부 표시 값은 해당 사양에 완전히 정의되어 있습니다. 예를 들어 display: flex가 선언될 때 발생하는 상황은 CSS flexbox 모델 사양에 정의되어 있습니다.

디스플레이 문서에서 속성에 대한 자세한 정보를 찾을 수 있습니다.

display 속성을 사용하여 JavaScript에서 버튼을 표시하고 숨기는 예를 들어 보겠습니다.

<input type="button" id="btn-3" value="Show" onClick="displayAction()" />
<input type="button" id="btn-4" value="Toggle" onClick="displayAction()"/>

function displayAction() {
  hidden = !hidden;
  if (hidden) {
    document.getElementById('btn-3').style.display = 'none';
  } else {
    document.getElementById('btn-3').style.display = 'block';
  }
}

위의 예에서 두 개의 버튼을 정의했습니다. 토글 버튼 값에 따라 첫 번째 버튼이 표시되고 숨겨집니다.

두 번째 버튼은 이전 버튼의 디스플레이 속성을 토글합니다.

JavaScript를 지원하는 모든 브라우저에서 위의 코드 스니펫을 실행하십시오. 아래 결과가 표시됩니다.

출력:

데모