23

IE8は をサポートしていないため、getComputedStyle使用できるのは のみcurrentStyleです。ただし、一部のプロパティについては、実際の「計算された」値が返されません。

例えば：

<style type="text/css">
#div {/* no properties are defined here */}
</style>

<div id="div">div</div>

// returns "medium" instead of 0px
document.getElementById('div').currentStyle.borderLeftWidth

// returns "auto" instead of 0px
document.getElementById('div').currentStyle.marginLeft

// returns "undefined" instead of 1
document.getElementById('div').currentStyle.opacity

jQueryや他のJavascriptライブラリを使用せずに、すべてのプロパティのクロスブラウザソリューションを持っている人はいますか?

4

5 に答える 5

16

これは、計算されたスタイルを取得するためのクロスブラウザー関数です...

getStyle = function (el, prop) {
    if (typeof getComputedStyle !== 'undefined') {
        return getComputedStyle(el, null).getPropertyValue(prop);
    } else {
        return el.currentStyle[prop];
    }
}

オブジェクト内にユーティリティとして保存することも、提供されたまま使用することもできます。サンプルデモはこちら！

// Create paragraph element and append some text to it
var p = document.createElement('p');
p.appendChild(document.createTextNode('something for fun'));

// Append element to the body
document.getElementsByTagName('body')[0].appendChild(p);

// Set hex color to this element
p.style.color = '#999';

// alert element's color using getStyle function
alert(getStyle(p, 'color'));

このデモをチェックして、動作を確認してください。

getStyle = function(el, prop) {
  if (getComputedStyle !== 'undefined') {
    return getComputedStyle(el, null).getPropertyValue(prop);
  } else {
    return el.currentStyle[prop];
  }
}

// Create paragraph element and append some text to it
var p = document.createElement('p');
p.appendChild(document.createTextNode('something for fun'));

// Append element to the body
document.getElementsByTagName('body')[0].appendChild(p);

// Set hex color to this element
p.style.color = '#999';

// alert element's color using getStyle function
console.log(getStyle(p, 'color'));
p {
  color: red;
}

于 2014-03-30T13:35:47.500 に答える
7

あなたはjqueryを使いたくありませんが、コードをのぞき見して、彼らがそれをどのように処理したかを見ることを妨げるものは何もありません:-)

jquery コードの内部には、このコメントに関する参照があります。あなたの問題に対処する必要があるjqueryコードは次のとおりです。

else if ( document.documentElement.currentStyle ) {
    curCSS = function( elem, name ) {
        var left, rsLeft,
            ret = elem.currentStyle && elem.currentStyle[ name ],
        style = elem.style;

    // Avoid setting ret to empty string here
    // so we don't default to auto
    if ( ret == null && style && style[ name ] ) {
        ret = style[ name ];
    }

    // From the awesome hack by Dean Edwards
    // http://erik.eae.net/archives/2007/07/27/18.54.15/#comment-102291

    // If we're not dealing with a regular pixel number
    // but a number that has a weird ending, we need to convert it to pixels
    // but not position css attributes, as those are proportional to the parent element instead
    // and we can't measure the parent instead because it might trigger a "stacking dolls" problem
    if ( rnumnonpx.test( ret ) && !rposition.test( name ) ) {

        // Remember the original values
        left = style.left;
        rsLeft = elem.runtimeStyle && elem.runtimeStyle.left;

        // Put in the new values to get a computed value out
        if ( rsLeft ) {
            elem.runtimeStyle.left = elem.currentStyle.left;
        }
        style.left = name === "fontSize" ? "1em" : ret;
        ret = style.pixelLeft + "px";

        // Revert the changed values
        style.left = left;
        if ( rsLeft ) {
            elem.runtimeStyle.left = rsLeft;
        }
    }

    return ret === "" ? "auto" : ret;
};
}
于 2013-12-10T08:24:47.683 に答える
7

それ以外の ：

getComputedStyle !== 'undefined'

そのはず ：

typeof getComputedStyle !== 'undefined'

そうしないと、機能しません。

于 2015-03-13T12:18:08.477 に答える
3

これは編集するには大きすぎるため、回答が作成されましたが、当面の質問に対する完全な回答は提供されません。

ガブリエルの答えは、CSS プロパティ名を期待し、キャメル ケース バージョンを必要とするため、ブラウザー バージョンのような"backgroundColor"または"background-color"依存するプロパティでは失敗します。.getPropertyValueel.currentStyle[prop]

これは、常にキャメルケースバージョンを期待する修正バージョンです:

function getStyle(el, prop) {
    return (typeof getComputedStyle !== 'undefined' ?
        getComputedStyle(el, null) :
        el.currentStyle
    )[prop]; // avoid getPropertyValue altogether
}
于 2016-12-28T03:10:49.997 に答える