JavaScript에서 이벤트 호버링을 통해 동일한 클래스로 여러 요소의 스타일을 동적으로 지정하는 방법은 무엇입니까?

JavaScript를 사용하여 동일한 클래스의 여러 요소에 스타일을 지정하는 방법

HTML 및 CSS로 작업할 때 스타일을 동적으로 변경해야 하는 경우가 있습니다. 동일한 클래스를 가진 여러 요소의. 이 경우 문제는 getElementsByClassName을 사용하여 다른 페이지 요소 위로 마우스를 가져갈 때 해당 클래스가 있는 모든 요소의 배경색을 변경하는 것에 관한 것입니다.

getElementsByClassName이 단일 요소가 아닌 요소 모음을 반환하기 때문에 문제가 발생합니다. . 여러 요소의 스타일을 지정하려면 컬렉션을 반복하고 각 요소에 스타일 변경 사항을 적용해야 합니다.

<code class="js">var elements = document.getElementsByClassName('classname');
for (var i = 0; i < elements.length; i++) {
  elements[i].style.backgroundColor = 'red';
}

또 다른 문제는 hover 이벤트가 대상 요소에 올바르게 연결되지 않는다는 것입니다. 원본 코드에서는 onmouseover 이벤트가 트리거 요소(마우스 위에 올려져 있는 요소)에 연결됩니다. 대상 요소의 스타일을 변경하려면 이벤트를 대상 요소 자체에 연결해야 합니다.

<code class="html"><th class="classname" onmouseover="changeColor(this)">Hover Here</th></code>

마지막으로 onmouseover와 같은 인라인 이벤트 핸들러는 권장되지 않는다는 점에 유의하는 것이 중요합니다. 대신 이벤트 리스너를 사용하여 이벤트 핸들러를 요소에 연결해야 합니다.

<code class="js">function changeColor(element) {
  element.style.backgroundColor = 'red';
}

document.querySelectorAll('.classname').forEach((element) => {
  element.addEventListener('mouseover', () => {
    changeColor(element);
  });
});</code>

이러한 기술을 사용하면 다른 페이지 요소 위로 마우스를 가져갈 때 동일한 클래스를 사용하는 여러 요소의 스타일을 동적으로 변경할 수 있습니다.

위 내용은 JavaScript에서 이벤트 호버링을 통해 동일한 클래스로 여러 요소의 스타일을 동적으로 지정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!