자바스크립트 숨기기 버튼

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

가시성 속성을 사용하여 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를 지원하는 모든 브라우저에서 위의 코드 스니펫을 실행하십시오. 아래 결과가 표시됩니다.

출력:

데모