JavaScript를 사용하여 외부 스타일이 지정된 HTML 요소의 스타일을 어떻게 동적으로 수정할 수 있습니까?

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

CSS를 사용하여 외부 스타일이 지정된 HTML 요소로 작업할 때 JavaScript를 통해 모양을 동적으로 수정해야 하는 경우가 많습니다. 이를 달성하는 한 가지 접근 방식은 요소의 '스타일' 속성을 조작하는 것입니다.

일반적으로 이는 ID 또는 클래스를 사용하여 요소를 참조한 다음 필요한 스타일 속성과 값을 요소의 스타일 속성에 추가하여 수행됩니다. . 그러나 요소를 찾는 데 사용되는 특정 방법에 따라 특정 미묘한 문제가 발생할 수 있습니다.

제공된 코드에 오류

다음 예를 고려하세요.

<p class="home" onclick="selectHome()">Home</p>

function selectHome() {
  document.getElementsByClassName("home").style += "background-color:green;";
}

여기서의 의도는 클릭 시 단락("home" 클래스 포함)의 배경색을 녹색으로 변경하는 것입니다. 그러나 이 코드는 잘못된 구문으로 인해 실패하는 경우가 많습니다.

구문 수정

스타일을 올바르게 수정하려면 다음 구문을 사용하세요.

document.querySelector(".home").style.backgroundColor = "green";

• . querySelector()는 지정된 클래스("home")와 일치하는 단일 요소를 찾습니다.
• .style은 요소의 스타일 객체.
• .style.groundColor는 배경색 속성을 설정합니다.

.querySelector()의 장점

.getElementsByClassName 대신 .querySelector() 사용 ()에는 여러 가지가 있습니다 장점:

• 불필요한 검색 및 목록 처리를 방지하면서 첫 번째로 일치하는 요소에 대한 참조를 반환합니다.
• "정적" 참조를 생성합니다. 즉, DOM은 한 번만 검색됩니다. 요소, 성능 향상.
• 대안보다 더 간결하고 성능이 좋습니다.

추가 고려 사항

• 여러 요소를 수정하려면 .querySelector() 대신 .querySelectorAll()을 사용하세요.
• 외부 CSS 규칙이 JavaScript를 통해 적용된 인라인 스타일을 재정의하지 않도록 하세요.
• 인라인 스타일을 강제로 적용하려면 필요한 경우 CSS에서 !important 플래그를 사용하세요. 우선합니다.

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