버튼을 사용하여 Div 가시성을 동적으로 전환하는 방법은 무엇입니까?

버튼으로 Div 가시성을 동적으로 전환

버튼 클릭으로 div 요소의 가시성을 원활하게 전환하고 싶으십니까? 이를 달성하는 방법은 다음과 같습니다.

순수 JavaScript:

다음 HTML 구조를 고려하세요.

<code class="html"><div id="newpost"></div></code>

순수 JavaScript를 사용하여 가시성을 전환하려면, 다음을 사용할 수 있습니다:

<code class="js">var button = document.getElementById('button');

button.onclick = function() {
    var div = document.getElementById('newpost');
    if (div.style.display !== 'none') {
        div.style.display = 'none';
    }
    else {
        div.style.display = 'block';
    }
};</code>

jQuery:

jQuery의 단순성으로 다음을 사용할 수 있습니다.

<code class="js">$("#button").click(function() { 
    $("#newpost").toggle();
});</code>

두 솔루션 모두 전환할 수 있습니다. ID가 "button"인 버튼을 클릭할 때 "newpost" div 요소의 가시성입니다. div 요소는 버튼을 클릭할 때마다 "숨김" 상태와 "표시" 상태 간에 전환됩니다.

위 내용은 버튼을 사용하여 Div 가시성을 동적으로 전환하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!