이벤트 발생 시 getElementsByClassName을 사용하여 요소의 스타일을 지정하는 방법은 무엇입니까?

이벤트에서 getElementsByClassName을 사용하여 요소 스타일 변경

특정 클래스가 있는 요소는 이벤트 발생 시 getElementsByClassName 메서드를 사용하여 스타일을 지정할 수 있습니다. 그러나 이 메서드는 요소 배열을 반환하므로 배열을 반복하여 일치하는 모든 요소에 스타일을 적용하는 것이 중요합니다. 또한 onmouseover와 같은 인라인 이벤트 처리 속성은 더 이상 사용되지 않습니다.

코드 오류

제공된 코드에 여러 오류가 있습니다.

1. getElementsByClassName 메서드 인수가 누락되었습니다. 가져올 클래스 이름을 지정해야 합니다.
2. "
3. 동일한 ID를 가진 요소가 여러 개 있습니다. 페이지("colorswitcher B")에 존재하므로 getElementById 호출이 모호해집니다.
4. getElementsByClassName 호출은 캐시되지 않으므로 여러 이벤트가 발생할 경우 비효율적일 수 있습니다.

해결책

1. document.getElementsByClassName('className')을 사용하여 일치하는 요소 컬렉션을 가져옵니다.
2. addEventListener를 사용하여 이벤트 핸들러를 연결합니다.
3. 성능을 위해 getElementsByClassName의 결과를 캐시합니다.
4. 인라인 스타일 속성 대신 외부 CSS 클래스를 사용하여 코드 가독성과 유지 관리성을 유지합니다.

예

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

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

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

  function changeColor(elements, color) {
    for (var i = 0; i < elements.length; i++) {
      elements[i].classList.add('class-color-' + color);
    }
  }
};</code>

위 내용은 이벤트 발생 시 getElementsByClassName을 사용하여 요소의 스타일을 지정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!