JavaScript의 `display` 속성을 사용하여 HTML 요소를 숨기고 표시하려면 어떻게 해야 합니까?

JavaScript를 사용하여 요소 숨기기 및 표시

웹 개발에서 페이지 요소의 가시성을 제어하는 ​​것은 일반적인 요구 사항입니다. 이 기사에서는 표시 스타일 속성을 사용하여 JavaScript에서 요소를 숨기고 표시하는 방법을 살펴봅니다.

요소를 숨기려면 해당 표시 속성을 없음으로 설정합니다. 이렇게 하면 페이지의 시각적 흐름에서 요소가 제거되어 사용자에게 보이지 않게 됩니다. 숨겨진 요소를 표시하려면 해당 표시 속성을 블록 또는 인라인과 같은 표시되는 값으로 다시 설정하기만 하면 됩니다.

예시 시나리오: 편집 기능 숨기기 및 표시

간단한 HTML 구조를 개선해 보겠습니다. 향상된 기능:

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

이 코드는 "편집" 링크와 숨겨진 텍스트 영역을 표시합니다. 링크를 클릭하면 텍스트 영역이 표시되고 "Lorem ipsum" 텍스트가 숨겨집니다.

해결책

요소 숨기기 및 표시를 모두 처리하도록 showStuff 함수를 수정할 수 있습니다.

function showStuff(id, text, btn) {
    document.getElementById(id).style.display = 'block';
    // hide the lorem ipsum text
    document.getElementById(text).style.display = 'none';
    // hide the link
    btn.style.display = 'none';
}

여기에서는 다음을 수행합니다.

• 디스플레이를 설정하여 대상 요소(id)를 표시합니다.
• 표시 속성을 없음으로 설정하여 "Lorem ipsum" 텍스트(텍스트)를 숨깁니다.
• 표시 속성을 없음으로 설정하여 "편집" 링크(btn)를 숨깁니다. .

수정된 예

이러한 변경 사항을 HTML:

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

"편집" 링크를 클릭하면 텍스트 영역을 표시하고 "Lorem ipsum" 텍스트를 숨기고 링크 자체를 숨기는 showStuff 기능이 트리거됩니다.

위 내용은 JavaScript의 `display` 속성을 사용하여 HTML 요소를 숨기고 표시하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!