JavaScript를 사용하여 div를 숨기고 표시하는 방법

웹 개발에서는 사용자 상호 작용 경험을 향상시키기 위해 JavaScript를 통해 요소를 숨기고 표시하는 기능을 구현해야 하는 경우가 많습니다. 일반적인 시나리오 중 하나는 버튼을 클릭하여 요소를 숨기거나 표시하는 것입니다. 다음은 JavaScript를 사용하여 이 기능을 구현하는 방법을 소개합니다.

1. HTML 구조

먼저 HTML에서 숨기거나 표시할 버튼과 div를 만들어야 합니다.

<button id="toggle-btn">点击切换</button>
<div id="toggle-div"></div>

2. CSS 스타일

버튼과 div에 CSS 스타일을 추가하여 더 아름답게 만들 수 있습니다. 작동하기 쉽습니다:

<button id="toggle-btn" style="background-color: #fff; color: #333; border: 1px solid #333; padding: 5px 10px;">点击切换</button>
<div id="toggle-div" style="background-color: #f5f5f5; padding: 10px;">这是要隐藏或显示的div</div>

3. JavaScript 코드

다음으로 JavaScript 코드를 사용하여 div를 숨기고 표시하는 기능을 구현해야 합니다. 이벤트 리스너를 사용하여 버튼 클릭 이벤트를 수신하고 CSS 스타일을 사용하여 div 표시 및 숨기기를 제어할 수 있습니다.

먼저 div의 상태를 나타내는 변수를 정의해야 합니다. 초기 상태가 표시되고 true로 정의됩니다.

let isShown = true;

그런 다음 querySelector 메서드를 사용하여 div의 버튼과 DOM 요소를 가져올 수 있습니다. 숨기거나 표시하려면:

const toggleBtn = document.querySelector('#toggle-btn');
const toggleDiv = document.querySelector('#toggle-div');

다음으로 클릭 이벤트를 바인딩해야 합니다. 즉, 사용자가 버튼을 클릭하면 다음 작업을 수행합니다.

toggleBtn.addEventListener('click', function() {
  if(isShown) {
    toggleDiv.style.display = 'none';
    isShown = false;
  } else {
    toggleDiv.style.display = 'block';
    isShown = true;
  }
});

이 코드에서는 div의 상태가 다음인지 여부를 결정합니다. 표시되고, 그렇다면 상태 변수를 업데이트하는 동안 숨겨진 상태로 설정하고 그 반대의 경우도 마찬가지입니다.

전체 코드:

<button id="toggle-btn" style="background-color: #fff; color: #333; border: 1px solid #333; padding: 5px 10px;">点击切换</button>
<div id="toggle-div" style="background-color: #f5f5f5; padding: 10px;">这是要隐藏或显示的div</div>

<script>
  let isShown = true;
  const toggleBtn = document.querySelector('#toggle-btn');
  const toggleDiv = document.querySelector('#toggle-div');
  toggleBtn.addEventListener('click', function() {
    if(isShown) {
      toggleDiv.style.display = 'none';
      isShown = false;
    } else {
      toggleDiv.style.display = 'block';
      isShown = true;
    }
  });
</script>

4. 최적화

위 코드는 div를 숨기고 표시할 수 있지만 코드에 일부 중복이 있어 최적화할 수 있습니다.

먼저 토글 메소드를 사용하여 div의 표시 및 숨김 상태를 전환할 수 있습니다.

toggleBtn.addEventListener('click', function() {
  toggleDiv.style.display = isShown ? 'none' : 'block';
  isShown = !isShown;
});

두 번째로 스타일 정의를 CSS로 이동하여 코드의 유지 관리성을 향상할 수 있습니다.

#toggle-btn {
  background-color: #fff;
  color: #333;
  border: 1px solid #333;
  padding: 5px 10px;
}

#toggle-div {
  background-color: #f5f5f5;
  padding: 10px;
}

최종 최적화 코드:

<button id="toggle-btn">点击切换</button>
<div id="toggle-div">这是要隐藏或显示的div</div>

<style>
  #toggle-btn {
    background-color: #fff;
    color: #333;
    border: 1px solid #333;
    padding: 5px 10px;
  }

  #toggle-div {
    background-color: #f5f5f5;
    padding: 10px;
  }
</style>

<script>
  let isShown = true;
  const toggleBtn = document.querySelector('#toggle-btn');
  const toggleDiv = document.querySelector('#toggle-div');
  toggleBtn.addEventListener('click', function() {
    toggleDiv.style.display = isShown ? 'none' : 'block';
    isShown = !isShown;
  });
</script>

5. 요약

JavaScript를 사용하여 요소를 숨기고 표시하는 것은 웹 개발에서 매우 일반적인 시나리오입니다. 이 기능은 이벤트 리스너, CSS 스타일 작동 및 요소 상태 제어를 통해 잘 구현되어 사용자 상호 작용 경험을 향상시킬 수 있습니다. 코드를 최적화하면 코드의 가독성과 유지 관리성이 더욱 향상되고 개발 효율성이 향상될 수 있습니다.

위 내용은 JavaScript를 사용하여 div를 숨기고 표시하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!