자바 스크립트를 통해 상속 된 CSS 값

내 페이지에서 자바 스크립트를 통해 일부 CSS 스타일을 변경하고 있습니다. 상속 된 값을 가져 오려고하면 그 값이 비어 있습니다. 다음 사항을 고려자바 스크립트를 통해 상속 된 CSS 값

.Sliding 
    { 
     display: none; 
     overflow: hidden; 
    } 

    .Sliding #FilterBox 
    { 
     height: 185px; 
     background-color: Fuchsia; 
    }

그리고 HTML :

<div class="Sliding" id="FilterBox"> 
     <h3>Test Form</h3> 
     This is a test/<br /> 
     12345 
</div>

내가 요소를 보면 그 빈 'document.getElementById를 (objname을)를를 .style.display'를? 자바 스크립트를 통해 디스플레이 값을 읽을 수 있습니까? 당신은 계산 된 스타일을 볼 필요가

출처

2009-07-23 cschear

모두에게 감사드립니다. getComputedStyle을 사용하면 내 문제가 해결되었습니다. getElementById(). style은 클래스 또는 ID로 설정된 스타일이 아닌 개별 스타일 설정에 사용됩니다. – cschear

당신은 getComputedStyle를 사용하는 것이 좋습니다.

속성은 인라인 스타일 (예 : 스타일 속성)에 액세스하고 설정하는 수단입니다.

그러나 예제는 상속과는 아무 관련이 없습니다. 관심있는 요소에 직접 적용되는 규칙 집합. 상속은 요소가 부모와 동일한 스타일을 inherit 키워드로 사용하는 경우입니다.

span { 
    color: inherit; 
}

getComputedStyle은 최종 계산 된 값을 제공하므로 상속 된 값도 가져옵니다.

출처

2009-07-23 06:34:45 Quentin

getComputedStyle()은 모든 유명 브라우저에서 작동하지 않습니다. (아무 것도 지정하지 않은 경우) –

이제 'getComputedStyle'을 안전하게 사용할 수 있습니다. http://caniuse.com/#feat=getcomputedstyle – Ivan

, see here

출처

2009-07-23 06:34:04

두 번째 CSS 규칙 :

.Sliding #FilterBox 
{ 
    height: 185px; 
    background-color: Fuchsia; 
}

이 ID 클래스 "슬라이딩"아무것도의 후손입니다 "FilterBox"아무것도 일치합니다, 그래서이 규칙이 사업부에 적용되지 않습니다.

그리고 계산 된 스타일을 얻으려면, 당신은 파비앙의 대답을 참조하거나이 물건을 많이 쉽게 jQuery를 사용하여 고려할 수있다 "jQuery를, $ ("# FilterBox ")를 사용하여

CSS를 (. display ")은"display "의 현재 값을 반환합니다.

출처

2009-07-23 06:36:36

-1 공정한 의견 -하지만 이것은 대답. – Quentin

물론, 계산 된 스타일로 백만 시간을 가리킬 수 있지만 CSS가 올바르지 않으면 시간 낭비가됩니다. –

두 번째 규칙은 디스플레이 속성에 영향을주지 않으므로 아무런 영향을 미치지 않습니다. 해당 요소에 적용하도록 작성되었습니다. – Quentin

if (!window.getComputedStyle) 
{ 
    window.getComputedStyle = function(el, pseudo) 
    { 
     this.el = el; 
     this.getPropertyValue = function(prop) { 

     var re = /(\-([a-z]){1})/g; 
     if (prop == 'float') 
      prop = 'styleFloat'; 
     if (re.test(prop)) 
     { 
      prop = prop.replace(re, function() { 

      return arguments[2].toUpperCase(); 
      }); 
     } 

     return el.currentStyle[prop] ? el.currentStyle[prop] : null; 
     } 

     return this; 
    } 
} 

function GetCompStyle() 
{ 
    var compStyle = window.getComputedStyle(document.getElementById('FilterBox'), ""); 
    alert(compStyle.getPropertyValue("display")); 
}

출처

2009-07-23 06:51:13 rahul

자바 스크립트를 통해 상속 된 CSS 값

답변

관련 문제