6

要素の背景を確認しようとしています。これが私のコードです。しかし、うまくいきません:

私は2つの方法を試しましたが、最初は次のとおりです。

function changeColor(field) {
     if(field.css('background-color','#ffb100')) {
          field.css('background-color','white');
     }
     else {
          field.css('background-color','ffb100');
     }
}

これが2番目です：

function changeColor(field) {
     if(field.css('background-color') === '#ffb100') {
          field.css('background-color','white');
     }
     else {
          field.css('background-color','ffb100');
     }
}

しかし、どちらもうまくいきませんでした！助言がありますか？

編集:これは私の最新のコードですが、まだ機能していません:

function changeColor(field) {
                if(field.css('background-color') == 'rgb(255, 255, 255)') {
                    field.css('background-color','ffb100');
                }
                else {
                    field.css('background-color','white');
                }
            }
4

4 に答える 4

17

jQuery.css()のドキュメントから：

要素の計算されたスタイルは、スタイル シートでその要素に指定された値と同じではない場合があることに注意してください。たとえば、計算された寸法のスタイルはほとんどの場合ピクセルですがem、 、ex、pxまたは%スタイル シートで指定できます。異なるブラウザは、論理的には等しいがテキスト的には等しくない CSS カラー値を返す場合があります (例: 、#FFF、#ffffffおよび ) rgb(255,255,255)。

ほとんどのブラウザーは値を返すrgbため、次のようにコーディングできます。

if (field.css('background-color') === 'rgb(255, 177, 0)') {
   // ...
}

上記のスニペットは、指定された理由に基づいて、一部のブラウザーで失敗する場合があります。background-color色変換ライブラリの使用を検討するか、一時要素を作成してその/colorプロパティを設定および取得できます。

シンプルな jQuery プラグイン:

(function($) {
    $.fn.isBgColor = function(color) {
        var thisBgColor = this.eq(0).css('backgroundColor');
        var computedColor = $('<div/>').css({ 
            backgroundColor: color
        }).css('backgroundColor');
        return thisBgColor === computedColor;
    }
})(jQuery);

使用法：

if ( field.isBgColor('#ffb100') ) {
   // ...
}
于 2012-08-25T18:17:26.400 に答える
5

@undefined が既に言ったように、あなたの問題を解決する background-colorcss()の値を返すので、彼の答えに賛成票を投じるべきです。rgbただし、JavaScript で固定色を使用しないことを強くお勧めします。

別の方法は、スタイルを配置する適切な場所である 2 つの CSS クラスを定義することです。

.orange {
  background-color: #ffb100;
}

.white {
  background-color: white;
}

次に、単純にフィールドのクラスを切り替えます。これは、JavaScript で 16 進数または RGB 値を比較するよりもはるかにクリーンであり、別の色が必要なときに簡単に切り替えることができます。

function changeColor(field) {
  field.toggleClass("white orange");
}

ここにデモがあります。

于 2012-08-25T18:30:28.507 に答える
1

何fieldが参照されているのかわかりませんが、要素のidであると推測されますか?

fieldもしそうなら、そのようにラッピングしてみてください$('#' + field).css。

注：HEXをRGBに変換するための非常に優れた関数があります

function hexToRgb(string)
{
    if(!string || typeof string !== 'string') return false;

    if(
        string.substring(0,1) == '#' && 
        (string.length == 4 || string.length == 7) && 
        /^[0-9a-fA-F]+$/.test(string.substring(1, string.length))
    ){
    string = string.substring(1, string.length);

    if(string.length == 3) 
        string = string[0] + string[0] + string[1] + string[1] + string[2] + string[2];

    return 'rgb(' + 
        parseInt(string[0] + string[1], 16).toString() + ',' + 
        parseInt(string[2] + string[3], 16).toString() + ',' + 
        parseInt(string[4] + string[5], 16).toString() + 
    ')';
}
else return false;
}
于 2012-08-25T18:17:35.660 に答える