JavaScript는 어떻게 HTML 요소를 동적으로 숨기고 표시할 수 있습니까?

JavaScript를 사용하여 동적으로 요소 숨기기

사용자가 텍스트 요소를 편집할 수 있는 버튼이 있다고 가정해 보겠습니다. 버튼을 클릭한 후 버튼이 사라지고 텍스트 요소가 편집용 텍스트 영역으로 바뀌도록 할 수 있습니다. JavaScript를 사용하여 이 작업을 수행하는 방법은 다음과 같습니다.

function showStuff(id, text, btn) {
    // Display the element with the given ID
    document.getElementById(id).style.display = 'block';

    // Hide the lorem ipsum text
    document.getElementById(text).style.display = 'none';

    // Hide the link
    btn.style.display = 'none';
}

제공된 HTML 스니펫에서 이를 수정하는 방법은 다음과 같습니다.

<td class="post">

    <a href="#" onclick="showStuff('answer1', 'text1', this); return false;">Edit</a>
    <span>

"편집" 링크를 클릭하면 다음 작업이 발생합니다.

• 텍스트 영역을 포함하는 숨겨진 "answer1" 범위는 다음과 같습니다. 표시됩니다.
• lorem ipsum 텍스트가 포함된 "text1" 범위가 숨겨집니다.
• "편집" 링크 자체가 표시되지 않습니다.

위 내용은 JavaScript는 어떻게 HTML 요소를 동적으로 숨기고 표시할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!