HTML 버튼을 숨기고 Onclick을 사용하여 표시
이 튜토리얼에서는 onclick 이벤트를 사용하여 HTML 버튼을 숨기고 표시하는 몇 가지 방법을 소개합니다.
CSS 디스플레이 속성을 사용하여 HTML에 숨겨진 버튼 표시
display 속성을 none으로 설정하여 먼저 HTML 버튼을 숨길 수 있습니다. 그런 다음 JavaScript를 사용하여 디스플레이 속성을 인라인 또는 차단으로 설정할 수 있습니다.
디스플레이 속성 인라인 또는 블록은 숨겨진 HTML 버튼을 표시합니다. 디스플레이: 인라인과 디스플레이: 블록의 차이점은 인라인 구성 요소가 라인 또는 행에 둘 이상의 구성 요소를 가질 수 있다는 것입니다.
그러나 블록 구성 요소는 라인 또는 행에 하나의 구성 요소만 가질 수 있습니다.
예를 들어 버튼을 만들고 이름을 Show로 지정합니다. 버튼의 onclick 속성을 makeChange()로 설정합니다.
makeChange() 함수는 표시 버튼을 클릭하여 호출됩니다. 그런 다음 다른 세 개의 버튼을 만들고 이름을 Button1, Button2 및 Button3으로 지정합니다.
Button1의 id를 b1로, Button2를 b2로, Button3을 b3으로 설정합니다. CSS에서 id로 버튼을 선택하고 display 속성을 none으로 설정합니다.
다음으로 JavaScript에서 makeChange() 함수를 만듭니다. 해당 기능 내에서 각 버튼의 표시 속성을 차단으로 설정합니다.
첫 번째 버튼에 대해 document.getElementById("b1")와 같은 id로 특정 버튼을 선택합니다. 그런 다음 document.getElementById("b1")style.display를 block에 할당하여 디스플레이를 설정합니다.
다른 두 버튼에 대해 반복합니다.
예제 코드:
<button onclick="makeChange();">Show</button>
<button id="b1">Button1</button>
<button id="b2">Button2</button>
<button id="b3">Button3</button>
#b1, #b2, #b3 {
display: none;
}
function makeChange() {
document.getElementById('b1').style.display = 'block';
document.getElementById('b2').style.display = 'block';
document.getElementById('b3').style.display = 'block';
}
jQuery show() 메서드를 사용하여 HTML에 숨겨진 버튼 표시
jQuery show() 함수를 사용하여 숨겨진 HTML 요소를 표시할 수도 있습니다. show() 기능은 display 속성이 none으로 설정된 선택된 HTML 구성 요소만 표시합니다.
visibility 속성이 none으로 설정된 HTML 요소에는 작동하지 않습니다. 위와 같은 방법을 사용하여 버튼을 숨길 것입니다.
또한 위의 방법에서 사용된 HTML 구조를 재사용합니다.
버튼의 display 속성을 none으로 설정한 후 JavaScript에서 makeChange() 함수를 생성합니다. 함수 내에서 id가 있는 버튼을 선택하고 jQuery show() 메서드를 $('#b1, #b2, #b3').show()로 호출합니다.
표시 버튼을 클릭하면 숨겨진 버튼이 표시됩니다. 따라서 jQuery show() 메서드를 사용하여 HTML에 숨겨진 버튼을 표시할 수 있습니다.
예제 코드:
<button onclick="makeChange();">Show</button>
<button id="b1">Button1</button>
<button id="b2">Button2</button>
<button id="b3">Button3</button>
#b1, #b2, #b3 {
display: none;
}
function makeChange() {
$('#b1, #b2, #b3').show();
}