JavaScript를 사용하여 HTML 요소의 ID별로 모든 스타일 속성과 해당 값을 적용하려면 어떻게 해야 합니까?

JavaScript에서 ID로 요소의 스타일 속성 가져오기

소개

모든 스타일 속성과 해당 항목을 검색해야 합니다. ID만 사용하여 HTML 요소에 값을 적용합니까? 이 질문은 정확히 이를 수행하는 방법에 대해 자세히 설명합니다.

문제 이해

목표는 요소의 ID를 사용하는 getStyleById 함수를 만드는 것입니다. 모든 스타일 속성과 해당 값의 목록을 반환합니다. 이 함수는 외부 CSS 파일에 정의된 인라인 속성과 스타일 속성을 모두 고려해야 합니다.

솔루션 작성

이를 달성하려면 다음 방법을 고려하세요.

• CSSStyleDeclaration 객체를 통한 루프(getComputeStyle): getPropertyValue를 사용하여 CSSStyleDeclaration 객체의 인덱스를 반복하여 각 속성 이름의 값을 얻습니다.
• 사용 in 루프 for currentStyle(IE 전용): Internet Explorer에만 존재하는 currentStyle 객체에 대해 일반적인 for in 루프를 사용합니다.
• 인라인 스타일도 비슷하게 루프합니다. 동일한 것을 활용합니다. 인라인 스타일 속성을 검색하기 위한 반복 접근 방식

코드 구현

<code class="javascript">function getStyleById(id) {
    return getAllStyles(document.getElementById(id));
}

function getAllStyles(elem) {
    if (!elem) return []; // Element does not exist, empty list.
    var win = document.defaultView || window, style, styleNode = [];
    if (win.getComputedStyle) { /* Modern browsers */
        style = win.getComputedStyle(elem, '');
        for (var i=0; i<style.length; i++) {
            styleNode.push( style[i] + ':' + style.getPropertyValue(style[i]) );
            //               ^name ^           ^ value ^
        }
    } else if (elem.currentStyle) { /* IE */
        style = elem.currentStyle;
        for (var name in style) {
            styleNode.push( name + ':' + style[name] );
        }
    } else { /* Ancient browser..*/
        style = elem.style;
        for (var i=0; i<style.length; i++) {
            styleNode.push( style[i] + ':' + style[style[i]] );
        }
    }
    return styleNode;
}</code>

사용

이를 사용하려면 함수를 사용하려면 요소의 ID로 getStyleById를 호출하면 됩니다. 예:

<code class="javascript">console.log(getStyleById('my-element'));</code>

이렇게 하면 ID가 'my-element'인 요소에 적용된 모든 스타일 속성과 해당 값이 포함된 배열이 인쇄됩니다.

위 내용은 JavaScript를 사용하여 HTML 요소의 ID별로 모든 스타일 속성과 해당 값을 적용하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!