'querySelectorAll'을 사용하여 JavaScript에서 여러 요소의 스타일을 수정하려면 어떻게 해야 합니까?

querySelectorAll을 사용하여 여러 요소의 스타일 수정

여러 요소의 스타일을 수정해야 하는 경우 탐색할 수 있는 한 가지 실행 가능한 방법은 다음과 같습니다. JavaScript의 querySelectorAll 메소드를 사용합니다. 이 방법을 사용하면 클래스 이름과 같은 특정 선택기를 기반으로 여러 요소를 선택할 수 있습니다.

사용 방법을 설명하려면 다음 시나리오를 고려하세요. 현재 클래스의 불투명도를 수정하는changeOpacity라는 함수가 있습니다. 트리거되면 단일 요소. 그러나 이 기능을 확장하여 여러 요소에 불투명도 변경 사항을 동시에 적용하려고 합니다.

querySelectorAll을 활용하면 공통 클래스 이름을 공유하는 모든 요소를 ​​선택할 수 있습니다. 이 선택 항목을 얻은 후 각 요소를 반복하고 원하는 스타일 수정 사항을 적용할 수 있습니다. 이 경우 불투명도 및 전환을 조정합니다.

다음은 querySelectorAll을 통합하는 ChangeOpacity 함수의 업데이트된 버전입니다.

<code class="js">function changeOpacity(className) {
    var elems = document.querySelectorAll(className);
    var index = 0, length = elems.length;
    for (; index < length; index++) {
        elems[index].style.transition = "opacity 0.5s linear 0s";
        elems[index].style.opacity = 0.5;
    }
}</code>

이제 클래스 이름을changeOpacity 함수에 인수로 전달하면 해당 클래스 이름을 가진 여러 요소에 불투명도 수정을 적용할 수 있습니다.

위 내용은 'querySelectorAll'을 사용하여 JavaScript에서 여러 요소의 스타일을 수정하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!