JavaScript에서 ID를 사용하여 요소에 적용된 모든 스타일을 추출하는 방법은 무엇입니까?

ID를 사용하여 요소에 적용된 모든 스타일을 얻는 방법

문제 설명

요소에 적용되는 스타일을 결정하는 함수를 만들려면 ID별로 인라인 및 CSS 파일 스타일을 모두 고려해야 합니다. 현재 구현에서는 ID와 함께 요소의 스타일 속성 이름을 허용하는 반면, 목표는 ID 제공만으로 모든 스타일 속성을 획득하는 것입니다.

답변

방법:

1. CSSStyleDeclaration 객체를 통해 반복: getCompulatedStyle 객체 내에서 속성 이름을 얻습니다. getPropertyValue를 사용하여 값을 수집합니다.
2. 표준 For 루프 사용: currentStyle에 이 방법을 사용합니다.
3. 동일 루프 기술 통합: 이것을 적용합니다. 인라인 스타일 접근 방식

코드:

function getStyleById(id) {
    return getAllStyles(document.getElementById(id));
}
function getAllStyles(elem) {
    // Check if element exists (empty list if not)
    if (!elem) return [];

    var win = document.defaultView || window, style, styleNode = [];

    // Modern browsers
    if (win.getComputedStyle) {
        style = win.getComputedStyle(elem, '');

        // Loop through style properties and gather values
        for (var i = 0; i < style.length; i++) {
            styleNode.push( style[i] + ':' + style.getPropertyValue(style[i]) );
        }
    } 
    // IE
    else if (elem.currentStyle) {
        style = elem.currentStyle;

        // Loop through currentStyle properties
        for (var name in style) {
            styleNode.push( name + ':' + style[name] );
        }
    } 
    // Ancient browsers
    else {
        style = elem.style;

        // Loop through inline styles
        for (var i = 0; i < style.length; i++) {
            styleNode.push( style[i] + ':' + style[style[i]] );
        }
    }

    // Return list of style properties
    return styleNode;
}

위 내용은 JavaScript에서 ID를 사용하여 요소에 적용된 모든 스타일을 추출하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!