15

javascript/jquery で if ステートメントを実行して判断することは可能ですか:

特定の要素の css 属性の値が特定の値と等しい場合は?

そのような： 

if( $('.box').css(background-color = blue) ){
    // do this...
}
4

5 に答える 5

30

JQuery メソッドはcss、パラメーターが 1 つだけ指定された場合、指定されたパラメーターの値を返します。これを試すことができます：

var color = $('.box').css('background-color');
if (color == 'rgb(0, 0, 255)' || color == 'blue') // =='blue' <- IE hack
    alert("it's blue!\nColor detected: " + color);

上記のサンプルは、JQuery セレクターの最初の要素に対してのみ機能するため、セレクターに.each複数の要素がある場合は、JQuery メソッドを使用してセレクター全体を反復処理する必要があります。

.cssJQuery メソッドはほとんどのブラウザー (IE を除く) で RGB の組み合わせを返すことに注意してください。そのため、IE 以外のブラウザーでは、 などの文字列に対してテストしてblueも十分ではありません。JQuery API サイトとmy fiddleでテストできます。

そして、ここに適切な.each反復があります：

$('.box').each(function(i){
    var color = $(this).css('background-color');
    if (color == 'rgb(0, 0, 255)' || color == 'blue') // =='blue' <- IE hack
        alert("div " + i + " is blue!\nColor detected: " + color);
});​

JSFiddle

編集： 1年半以上経った今、この回答は更新に値すると思います。

ほとんどのユースケースでは、CSS クラスを使用することをお勧めします。

.blue {
    color: blue;
}

これにより、addClass()、removeClass()、toggleClass()メソッドを操作やhasClass()チェックに使用できます。

if ( $('#myElem').hasClass('blue') ) {
    //it has the .blue class!
}

これは、ハックを必要とせずにすべてのブラウザでシームレスに動作し、プラスとして、懸念事項をより適切に分離できます。つまり、スタイルが変更された場合でも.blue { color: lightblue; }、JS は変更なしで動作し続けます。

注: もちろん、このアプローチは、色の値が動的に生成されるいくつかのまれな使用例 (Math.random()キャンバス ピクセルから色の値を使用または選択するなど) には適していません。これらのまれな使用例では、最初のソリューションを使用できます。この答え。

于 2012-05-27T00:45:13.807 に答える
4

次のようなことができるはずです。

if ($('.box').css('background-color') === 'blue') 
{// do this...}
于 2012-05-27T00:44:13.897 に答える
2

のスペースを確認してください

if($(this).css('color') == 'rgb(251, 176, 64)')

「SPACE AFTER COMA」

于 2015-01-24T02:17:51.350 に答える
0 
boxes = $('.box');
for(var i = 0;i<boxes.length;i++) {
  if(boxes[i].style.backgroundColor =="blue") {
    //do stuff
  }
}
于 2012-05-27T00:51:16.507 に答える
0

上記のいずれも 2015 年には機能しないようです。リンクの色を :visited の色に対してテストすると、Chrome ではすべての場合に当てはまるようです。また、「スニッフィング」ではなく、あなたのウェブサイトへの訪問中にリンクがクリックされたかどうかを本当に知りたい場合は、次のように簡単にわかりました。

$("a").addClass('visited');

クラスのチェックは問題なく機能します。

if ( $("a").hasClass('visited'); ){ console.log('do something honorable'); }
于 2015-02-07T16:19:02.880 に答える