getElementById 없이 JavaScript에서 CSS 클래스 스타일을 동적으로 수정하는 방법은 무엇입니까?

getElementById 없이 JavaScript에서 CSS 클래스 스타일 수정

문제:

동적으로 수정하는 방법 getElementById를 사용하지 않고 JavaScript에서 클래스를 타겟팅하여 요소의 CSS 스타일을 변경하시겠습니까?

답변:

JavaScript에서 styleSheets 배열을 사용하여 CSS 스타일을 수정할 수는 있지만 , 더 효율적인 대안은 원하는 표시 설정으로 별도의 스타일을 만드는 것입니다.

예를 들어 다음 규칙을 사용하여 스타일 시트를 만듭니다.

.hidden {
  display: none;
}

이 스타일을 요소에 적용하려면 , 제거() 메소드를 사용하십시오:

const element = document.querySelector(".hidden");
element.classList.remove("hidden");

이렇게 하면 숨겨진 클래스와 해당 스타일 규칙이 제거되어 요소가 표시됩니다.

추가 참고:

이 접근 방식은 DOM에 새로운 스타일 규칙을 생성한다는 점에 유의하는 것이 중요합니다. 스타일 지정에 대한 더 많은 유연성과 제어 기능을 제공하지만 이 방법을 과도하게 사용하면 문서의 메모리 사용량이 늘어날 수 있습니다.

위 내용은 getElementById 없이 JavaScript에서 CSS 클래스 스타일을 동적으로 수정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!