jquery - 特定の CSS 値が存在するかどうかを確認する方法

Question

なぜこれがうまくいかないのですか？

ブラウザ＝サファリ

<p style="color:blue;">foo</p>

if ($("p").css(("color") === "blue")) {
        alert(1);
}

ありがとうございました

Answer 1

構文と括弧がすべてです。

if ($("p").css("color") === "blue") {
        alert(1);
}

Answer 2

最初は、ブラケットの配置が間違っています。次のように、CSS プロパティ「color」の値を取得.css("color")し、値と等しいかどうかをテストする必要があります。

if ($('p').css('color') === 'blue') {
    alert('color is blue');
}

ただし、一部のブラウザーはrgb代わりに「青」と一致しない値を返します。たとえば、Chrome と Firefox は を返すrgb(0, 0, 255)ため$('p').css('color')、rgb (または 16 進数 - '#0000ff') 値に対してもテストする必要がある場合があります。すべての値は論理的には同じですが、テキスト的には同じではありません。

var color = $('p').css('color')
if (color === 'blue' || color === 'rgb(0, 0, 255)' || color === '#0000ff') {
    alert('color is blue');
}

さらに、if 条件はおそらく色のケースを考慮に入れる必要があります。「BLUE」または「#0000FF」も有効です。

Answer 3

私はそれがあるべきだと思います：if ($("p").css("color") === "blue"){ alert(1); }

Answer 4

少なくとも Firefox と Chrome では

$("p").css("color") 

rgb(0,0,255) を返すので、とにかく条件は真ではありません。だから多分そのような回避策：

if ($("p").attr("style").contains('color:blue;')) {
    alert(1);
}