8

要素に背景が明示的に設定されているかどうかを判断しようとしています。*が設定されているかどうかを確認するだけでよいと思いまし.css('background')たが、ブラウザ間で一貫性がありません。たとえば、chromeは、背景が次のように設定されていない要素を示します。

background: rgba(0, 0, 0, 0) none repeat scroll 0% 0% / auto padding-box border-box
background-color: rgba(0, 0, 0, 0)
background-image: none

IE8は

background: undefined
background-color: transparent
background-image: none

（ここでのテストケース）

*（CSSの省略形プロパティはjQueryでレンダリングされたスタイルを取得するためにサポートされていません）

それぞれの個別のケースを処理する以外に、これを検出するためのより良い方法はありますか？

4

4 に答える 4

3

一時的な要素のアプローチ

理想的ではありませんが、jsの開始時に一時的な要素を作成し、ドキュメントの非表示の場所に挿入して（Webkitブラウザーで空のスタイルを取得しない場合）、その要素に設定されているデフォルトの背景スタイルを読み取ることができます。これにより、ベースライン値が得られます。次に、実際の要素と比較すると、それらが異なる場合は、背景が設定されていることがわかります。明らかに、この方法の欠点は、バックグラウンドをベースライン状態に具体的に設定したかどうかを検出できないことです。

var baseline = $('<div />').hide().appendTo('body').css('background');

var isBackgroundSet = ( element.css('background') != baseline );

要素で可能なグローバルスタイルを避けたい場合は、システムが壊れます。つまり、次のようになります。

div { background: red; }

...代わりに次のものを使用できますが、古いブラウザでこれほどうまく機能するかどうかは疑問です。

var baseline = $('<fake />').hide().appendTo('body').css('background');

バックグラウンド

私は同様の問題にしばらく時間を費やしました-パーセンテージに設定されたときに要素から元の幅の値を取得しようとしました。これは私が想定していたよりもはるかにトリッキーでしたが、最終的には同様の一時的な要素ソリューションを使用しました。また、Rene Kochが上で行ったように、このgetComputedStyle方法が機能することも期待していました...本当に迷惑なことに機能しません。ソースCSSの世界とランタイムCSSの世界の違いを検出しようとするのは難しいことです。

于 2012-11-07T22:17:01.917 に答える
1

これは機能するはずです：

function isBGDefined(ele){
    var img = $(ele).css('backgroundImage'),
        col = $(ele).css('backgroundColor');

    return img != 'none' || (col != 'rgba(0, 0, 0, 0)' && col != 'transparent');
};

デモ

最終的に、および/またはbackgroundの計算されたスタイルが変更されるため、プロパティに対してテストする必要はありませんでした。backgroundImagebackgroundColor

テストケースに対して実行されたコードは次のとおりです（別のコードが追加されています）：http：//jsfiddle.net/WG9MC/4/

于 2012-11-07T22:19:40.103 に答える
0

この記事では、その方法について説明します：http: //robertnyman.com/2006/04/24/get-the-rendered-style-of-an-element/

function getStyle(oElm, strCssRule){
    var strValue = "";
    if(document.defaultView && document.defaultView.getComputedStyle){
        strValue = document.defaultView.getComputedStyle(oElm, "").getPropertyValue(strCssRule);
    }
    else if(oElm.currentStyle){
        strCssRule = strCssRule.replace(/\-(\w)/g, function (strMatch, p1){
            return p1.toUpperCase();
        });
        strValue = oElm.currentStyle[strCssRule];
    }
    return strValue;
}
于 2012-11-07T22:08:49.233 に答える
0

@pebblによって提案されたアプローチを使用してhasBack()、要素にバックグラウンドが設定されているかどうかを判断するための小さなjQuery関数を作成しました。

$.fn.hasBack = function()
{
    var me = $.fn.hasBack;
    if(!me.cache)
    {
        // get the background color and image transparent/none values
        // create a temporary element
        var $tmpElem = $('<div />').hide().appendTo('body');
        $.fn.hasBack.cache = {
            color: $tmpElem.css('background-color'),
            image: $tmpElem.css('background-image')
        };
        $tmpElem.remove();
    }
    var elem = this.eq(0);
    return !(elem.css('background-color') === me.cache.color && elem.css('background-image') === me.cache.image);
}

これは、Chrome v22、Firefox v15、Opera 12.1、IE9、IE9をブラウザモード9 compat、9、8、7およびquirksモードに設定してテストされました。

ここでテストケース。

于 2012-11-08T16:13:18.043 に答える