2

現在の色に基づいて、クリック時に要素の背景を変更しようとしています。

関連するhtmlは次のとおりです。

<div id="rect" style="height: 100px; width:300px; background: red">
</div>

そして私のjqueryの試み：

    $("#rect").click(function() {
    if ($(this).css('background') == 'red') {
        $(this).css('background','blue');}
    else {$(this).css('background','yellow');}
    });

私はいつも黄色い箱を手に入れています。「真の」条件は決して発火しません。

私は何を間違っていますか？

4

1 に答える 1

3

アップデート

予想通り、IEで1つの例外が見つかりました。IE例外を説明するには、jQueryの.browserメソッドを使用するだけです。これを以下のサンプルコードに追加しました。

試す：

$("#rect").click(function() {
    var red = $.browser.msie ? "red" : "rgb(255, 0, 0)";
    if ($(this).css('background-color') == red) {
        $(this).css('background','blue');}
    else {$(this).css('background','yellow');}
});

コメントで説明したように、jQueryはCSSプロパティの「背景」の各部分を分解するため、この場合は必要なプロパティを正確に呼び出す必要がありますbackground-color。また、jQueryはカラー値をRGBスタイルとして返すため、赤はになりますrgb(255, 0, 0)。.css("background"これは、背景の設定に役立つことを止めるものではありません。cssと同様に、 backgroundは他のすべてのbackground-directプロパティをオーバーライドすることを覚えておいてください。

どうやら誰かが私のためにjsFiddleの例を作ったようです。（ありがとうSushanth）

ここでそれを参照してください

また、@ RyanKinalは彼のコメントで良い点を述べています。「jQueryは色を特定の形式に正規化することすらできないため、ブラウザが異なれば色も異なる形式で返される可能性があります。注意が必要です。」 私はテストしていません...

さまざまなブラウザを介して返されるCSS「赤」：

  • Firefox 17：「rgb（255、0、0）」
  • Chrome 24：「rgb（255、0、0）」
  • Opera 12： "rgb（255、0、0）"
  • Safari 5：「rgb（255、0、0）」
  • IE 7-9：「赤」
于 2012-12-03T16:59:54.767 に答える