>웹 프론트엔드 >CSS 튜토리얼 >JavaScript에서 ID로 요소의 모든 스타일 속성을 검색하는 방법은 무엇입니까?

JavaScript에서 ID로 요소의 모든 스타일 속성을 검색하는 방법은 무엇입니까?

Susan Sarandon
Susan Sarandon원래의
2024-10-30 22:42:03283검색

How to Retrieve All Style Attributes of an Element by ID in JavaScript?

요소 ID로 모든 스타일 속성 가져오기

다음 방법으로 ID를 제공하여 요소에 적용된 모든 스타일 속성을 가져올 수 있습니다.

CSSStyleDeclaration 객체를 통한 반복:

CSSStyleDeclaration 객체(getCompulatedStyle)의 인덱스를 반복하여 알려진 각 속성 이름을 얻습니다. 이 이름과 함께 getPropertyValue를 사용하여 값을 검색합니다.

인라인 스타일 처리:

인라인 스타일의 경우 다른 스타일 유형과 동일한 반복 방법을 사용합니다.

모두 합치기:

코드는 다음과 같습니다.

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

function getAllStyles(elem) {
    if (!elem) return [];

    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]) );
        }
    } 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>

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

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.