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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

JavaScript css Array Object while include require using class Property function this

성명：

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