JavaScript를 사용하여 외부 스타일이 지정된 HTML 요소의 스타일을 효율적으로 수정하려면 어떻게 해야 합니까?

JavaScript를 사용하여 외부 스타일이 지정된 HTML 요소의 스타일 속성 수정

JavaScript를 사용하여 HTML 요소의 모양을 동적으로 사용자 정의할 때 다음이 필요할 수 있습니다. 외부 CSS 스타일시트에 처음 정의된 스타일 속성을 수정합니다. document.getElementsByClassName() 메서드를 사용하여 그렇게 하는 것이 가능하지만 단점이 있습니다.

getElementsByClassName() 사용의 단점

• 라이브 노드 목록을 반환합니다: getElementsByClassName()은 DOM 변형을 기반으로 콘텐츠를 지속적으로 업데이트하는 라이브 노드 목록을 생성합니다. 이는 단일 요소 또는 대규모 요소 목록에 액세스하는 데 비효율적일 수 있습니다.
• 불필요한 검색이 발생하기 쉽습니다. 심지어 첫 번째 요소에만 관심이 있는 경우 메서드는 DOM을 반복하여 일치하는 모든 요소를 ​​찾고 대부분을 삭제합니다.

더 나은 대안: querySelector()

외부 스타일이 지정된 HTML 요소의 스타일 속성을 효율적이고 안정적으로 수정하려면 querySelector( ) 방법 대신. querySelector()는 DOM에서 지정된 선택기와 일치하는 첫 번째 요소를 검색하고 해당 요소에 대한 참조를 반환합니다. 일치하는 요소가 없으면 정의되지 않은 값을 반환합니다.

수정 예

"home" 클래스가 있는 요소를 클릭하면 녹색으로 바뀌는 경우 다음 코드를 사용할 수 있습니다.

const homeElement = document.querySelector(".home");
homeElement.style.color = "green";

이 코드는 "home" 클래스가 있는 첫 번째 요소를 안전하게 검색하고 색상 스타일 속성을 직접 수정합니다. 라이브 노드 목록이 필요합니다.

위 내용은 JavaScript를 사용하여 외부 스타일이 지정된 HTML 요소의 스타일을 효율적으로 수정하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!