JavaScript에서 요소의 CSS 속성 값을 검색하는 방법은 무엇입니까?

JavaScript를 사용하여 요소의 CSS 속성 읽기

문제:

값을 얻는 방법 스타일시트가 웹페이지 외부에 링크되어 있다는 점을 고려하여 JavaScript를 사용하는 요소에 대한 CSS 속성을 설정하시겠습니까?

해결책:

두 가지 기본 접근 방식이 있습니다.

1. document.styleSheets 사용:

이 방법에는 document.styleSheets 배열을 수동으로 반복하고 CSS 규칙을 구문 분석하여 원하는 속성을 찾는 작업이 포함됩니다. 그러나 이 접근 방식은 리소스 집약적이며 대부분의 시나리오에 실용적이지 않으므로 권장되지 않습니다.

2. 일치하는 요소 생성 및 getComputeStyle 사용:

이 메서드는 대상 요소와 동일한 CSS 선택기를 사용하여 요소를 생성하고 getCompulatedStyle 메서드를 사용하여 속성 값을 검색합니다. 이 접근 방식의 장점은 상속된 모든 스타일과 동적으로 적용되는 모든 스타일을 고려한다는 것입니다.

코드 예:

div의 "color" 속성을 검색하려면 "레이아웃" 클래스에 다음 코드를 사용합니다.

<code class="javascript">function getStyleProp(elem, prop){
    if(window.getComputedStyle)
        return window.getComputedStyle(elem, null).getPropertyValue(prop);
    else if(elem.currentStyle)
        return elem.currentStyle[prop]; //IE
}</code>

사용:

<code class="javascript">window.onload = function(){
    var d = document.createElement("div"); //Create div
    d.className = "layout";                //Set class = "layout"
    alert(getStyleProp(d, "color"));       //Get property value
}</code>

추가 참고 사항:

인라인을 무시하려면 현재 요소에 스타일을 정의하려면 getNonInlineStyle 함수를 사용하세요.

<code class="javascript">function getNonInlineStyle(elem, prop){
    var style = elem.cssText; //Cache the inline style
    elem.cssText = "";        //Remove all inline styles
    var inheritedPropValue = getStyle(elem, prop); //Get inherited value
    elem.cssText = style;     //Add the inline style back
    return inheritedPropValue;
}</code>

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