JavaScript를 통해 상속 된 CSS 값

Question

내 페이지에서 나는 JavaScript를 통해 일부 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'빈? Via JavaScript를 통해 디스플레이 값을 어떻게 읽을 수 있습니까?

Answer 1

당신은 사용하고 싶을 것입니다 GetComputedStyle.

그만큼 .style 속성은 인라인 스타일에 액세스하고 설정하는 수단입니다 (즉, 스타일 속성처럼).

그러나 예제는 상속과 관련이 없습니다. 관심있는 요소에 직접 적용되는 규칙 설정 만. 상속은 요소가 inherit 예어.

span {
    color: inherit;
}

GetComputedStyle은 최종 계산 된 값을 제공하므로 상속 된 값도 선택합니다.

Answer 2

두 번째 CSS 규칙 :

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

클래스 "슬라이딩"이있는 모든 것의 후손 인 ID "Filterbox"와 일치 하므로이 규칙은 DIV에 적용되지 않습니다.

그리고 계산 된 스타일을 얻으려면 Fabien의 답변을 참조하거나 jQuery를 사용하는 것을 고려할 수 있습니다.

jQuery 사용, $ ( "#filterbox"). css ( "display") "디스플레이"의 현재 값을 반환합니다.

Answer 3

계산 된 스타일을보아야합니다. 여기를 봐

Answer 4

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