10

私のページでは、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を介して表示値を読み取るにはどうすればよいですか？

4

4 に答える 4

13

getComputedStyleを使用することをお勧めします。

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

ただし、この例は継承とは関係がないことに注意してください。inherit関心のある要素に直接適用されるルールセットだけです。継承とは、要素がキーワードを介してその親と同じスタイルをとる場合です。

span {
    color: inherit;
}

ただし、getComputedStyleは最終的な計算値を提供するため、継承された値も取得します。

于 2009-07-23T06:34:45.110 に答える
2

2 つ目の CSS ルール:

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

クラス「Sliding」を持つものの子孫である ID「FilterBox」を持つものと一致するため、このルールは div には適用されません。

計算されたスタイルを取得するには、Fabien の回答を参照するか、jQuery の使用を検討してください。これにより、この作業がはるかに簡単になります。

jQuery を使用すると、$("#FilterBox").css("display")は "display" の現在の値を返します。

于 2009-07-23T06:36:36.900 に答える
1 
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-23T06:51:13.800 に答える
0

あなたは計算されたスタイルを見る必要があります、ここを見てください

于 2009-07-23T06:34:04.160 に答える