getElementsByClassName을 올바르게 사용하고 이벤트에 따라 요소 스타일을 변경하는 방법은 무엇입니까?

getElementsByClassName을 사용하여 요소 스타일 변경

getElementsByClassName을 사용하면 동일한 클래스 이름을 가진 여러 요소를 선택할 수 있습니다. 주어진 예에서 코드는 해당 div 외부에서 이벤트가 발생할 때 특정 클래스 이름을 가진 모든 div의 배경색을 변경하는 것을 목표로 합니다.

문제 진단

제공된 코드에는 몇 가지 문제가 있습니다.

1. getElementsByClassName의 잘못된 사용: getElementsByClassName() 구문은 단일 DOM 요소가 아닌 일치하는 요소의 컬렉션을 반환합니다. 각 요소의 스타일을 변경하려면 컬렉션을 반복해야 합니다.
2. 잘못된 HTML 구문: 요소의 ID에는 공백을 포함할 수 없으므로 색상 전환기 A 및 색상 전환기 B ID가 유효하지 않게 됩니다. .

솔루션

이러한 문제를 해결하려면 다음 수정된 코드를 사용할 수 있습니다.

<code class="javascript">window.onload = function() {
  var aElements = document.getElementsByClassName('a');
  var bElements = document.getElementsByClassName('b');

  document.getElementById('A').addEventListener('mouseover', function() {
    changeColor(aElements, 'red');
  });

  document.getElementById('B').addEventListener('mouseover', function() {
    changeColor(bElements, 'blue');
  });
};

function changeColor(elements, color) {
  for (var i = 0; i < elements.length; i++) {
    elements[i].style.backgroundColor = color;
  }
}</code>

수정된 코드에서:

1. getElementsByClassName에서 반환된 컬렉션을 반복하여 일치하는 모든 요소의 스타일을 변경합니다.
2. 트리거 요소를 식별하기 위해 공백이 없는 올바른 ID를 사용합니다.
3. 원하는 색상 변경을 요소에 적용하기 위해changeColor 함수를 정의합니다.

추가 참고 사항

최적의 성능을 위해서는 요소 컬렉션을 캐싱하는 대신 요소 컬렉션을 캐싱하는 것이 좋습니다. 매번 다시 쿼리합니다. 또한 스타일 변경을 위해 CSS 클래스와 이벤트 리스너를 사용하는 것이 인라인 속성보다 더 효율적입니다.

위 내용은 getElementsByClassName을 올바르게 사용하고 이벤트에 따라 요소 스타일을 변경하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!