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'？ javascript経由で表示値を読み取るにはどうすればよいですか？

Answer 1

、計算されたスタイルを見てする必要があります。

プロパティは、インラインスタイルにアクセスして設定する手段です（つまり、スタイル属性のように）。

ただし、あなたの例は継承とは関係ありません。興味のある要素に直接適用されるルールセットだけです。継承は、要素が親要素と同じスタイルを持ち、inheritキーワードを使用する場合です。

span { 
    color: inherit; 
} 

getComputedStyleは最終的に計算された値を返します。したがって、継承された値も取得されます。

Answer 2

あなたがgetComputedStyleを使用したいと思うsee here

Answer 3

あなたの二CSSルール：

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

は、「スライディング」クラスを使って何の子孫であるID「FilterBox」とは何もマッチしますので、このルールはあなたのdivには適用されません。

と計算のスタイルを取得するために、あなたはファビアンの回答を参照するか、またはこのようなものたくさん容易になりますjQueryを使用して検討することができます：「jQueryの、$（「＃FilterBox」）を使用して

CSSを（。 display "）は、" display "の現在の値を返します。

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