ID로 HTML 요소의 모든 인라인 및 외부 스타일을 검색하는 방법은 무엇입니까?

요소 ID로 HTML 요소의 스타일 속성 검색

요소의 ID가 제공되면 해당 요소에 적용된 모든 스타일을 검색하는 함수를 만들고 싶습니다. 인라인 및 외부 정의가 모두 정의됩니다.

포괄적인 솔루션은 다음과 같습니다.

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

function getAllStyles(elem) {
    if (!elem) return []; // Element does not exist, return 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 browsers..*/
        style = elem.style;
        for (var i = 0; i < style.length; i++) {
            styleNode.push(style[i] + ':' + style[style[i]]);
        }
    }
    return styleNode;
}</code>

분석은 다음과 같습니다.

• getComputeStyle에서 제공하는 스타일 객체를 반복하여 모든 항목을 가져옵니다. 스타일 속성 및 해당 값.
• currentStyle(IE)을 지원하는 브라우저의 경우 해당 객체를 반복합니다.
• 요소의 스타일 속성을 직접 반복하여 인라인 스타일을 처리합니다.
• 결과는 "propertyName:propertyValue" 형식의 문자열 배열입니다.

위 내용은 ID로 HTML 요소의 모든 인라인 및 외부 스타일을 검색하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!