継承されCSS値によJavascript

Question

マイページのい変化に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>

見れば、要素を書きします。getElementById(objname).ます。表示'は、ブランク?たいのですが、ディスプレイを読み込み価値によjavascript?

Answer 1

使い getComputedStyle.

の .style 物件はアクセスするための手段と、設定をインラインスタイル（のようなスタイル属性）に指定します。

がありますので注意してくださればな継承関係を示します。でルールを設定し適用される直接の要素に興味をもったかを記入します。相続き要素のスタイルはその親の inherit キーワードとなります。

span {
    color: inherit;
}

getComputedStyleされた計算値なので、そのまで送迎を受け継値です。

Answer 2

第二のCSS規則:

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

ま試合も身分を証明するものの提示が必要"FilterBox"ことは子孫をおいてクラス"滑り"なのでこの規則の適用がなくおdiv.

を計算したスタイルを参照することができますFabienの答えに、jQueryを使うので、こっくり:

jQueryを使った, $("#FilterBox").css("表示") い、現在の値が返り"を展示します

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