JavaScript를 사용하여 웹페이지 요소의 CSS 속성을 검색하는 방법은 무엇입니까?

JavaScript를 사용하여 웹 페이지 요소의 CSS 속성 검색

CSS 파일이 웹 페이지에 연결되면 JavaScript 개발자는 요소의 특정 CSS 속성을 읽어야 할 필요가 있을 수 있습니다.

이 시나리오에서는 웹페이지에

클래스 이름이 "layout"인 요소의 경우 개발자는 JavaScript를 사용하여 이 요소의 특정 속성을 검색하는 솔루션이 필요합니다. 다양한 접근 방식을 사용할 수 있지만 권장되는 두 가지 옵션은 다음과 같습니다.

옵션 1: 요소 생성 및 수정

1. 관심 있는 요소와 동일한 속성을 가진 요소 생성(예: < ;div> 클래스 이름이 "layout"임).
2. getComputeStyle 메소드를 사용하여 계산된 속성 값을 검색합니다. 이 방법은 모든 관련 CSS 규칙을 적용한 후 결과 스타일을 제공합니다.

<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
}

window.onload = function(){
    var d = document.createElement("div");
    d.className = "layout";
    alert(getStyleProp(d, "color"));
}</code>

옵션 2: Document.styleSheets 개체를 수동으로 구문 분석

1. document.styleSheets 개체에 액세스합니다. 에는 문서에 연결된 모든 스타일시트의 배열이 포함되어 있습니다.
2. 원하는 선택기와 연결된 특정 속성 값을 검색하려면 각 스타일시트에서 getPropertyValue() 메서드를 사용하세요.

이것은 특정 선택기에 의해 정의된 모든 CSS 속성을 수집하기 위해 특별히 요구되지 않는 한 옵션은 권장되지 않습니다.

또한 현재 요소의 인라인 스타일 정의를 무시하려면 getNonInlineStyle() 함수를 활용하세요.

<code class="javascript">function getNonInlineStyle(elem, prop){
    var style = elem.cssText;
    elem.cssText = "";
    var inheritedPropValue = getStyle(elem, prop);
    elem.cssText = style;
    return inheritedPropValue;
}</code>

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