3

背景色を条件とするifステートメントに関する他のトピックを見てきました。しかし、実行可能な答えは見つかりませんでした。事前に要素を変数として作成するか、rgbまたはrgbaを使用するかにかかわらず、結果は得られず、ifは直接elseに渡されます。

var element = $("#ARCStatusBox3EQETD");
console.log($('#ARCStatusBox1EQETD').css('backgroundColor'));
    if(element.css('background-color') == "rgb(220,20,60)") {
        $('#HomeStatus1').css("background-color", "#dc143c");
    }
    else if ($('#ARCStatusBox2EQETD').css('background-color') == '#daa520' || $('#ARCStatusBox2EQETD').css('background-color') == '#daa520' || $('#ARCStatusBox1EQETD').css('background-color') == '#daa520'){
        $('#HomeStatus1').css("background-color", "#daa520");
    }
    else {// ($('#ARCStatusBox3EQETD').css('background-color') == '#7cfc00' || $('#ARCStatusBox2EQETD').css('background-color') == '#7cfc00' || $('#ARCStatusBox1EQETD').css('background-color') == '#7cfc00'){
        $('#HomeStatus1').css("background-color", "#7cfc00");
}

私のコードがありますが、==16進コードとしてもrgb/rgbaとしても機能しません。

解決策についての助けは大歓迎です。

4

6 に答える 6

4

試す

var element = $("#ARCStatusBox3EQETD");
    if(element.css('background-color') == "rgb(220, 20, 60)") {
        $('#HomeStatus1').css("background-color", "#dc143c");
    }
    else if (hexColor($('#ARCStatusBox2EQETD').css('background-color')) == '#daa520' || hexColor($('#ARCStatusBox2EQETD').css('background-color')) == '#daa520' || $('#ARCStatusBox1EQETD').css('background-color') == '#daa520'){
        $('#HomeStatus1').css("background-color", "#daa520");
    }
    else {// ($('#ARCStatusBox3EQETD').css('background-color') == '#7cfc00' || hexColor($('#ARCStatusBox2EQETD').css('background-color')) == '#7cfc00' || hexColor($('#ARCStatusBox1EQETD').css('background-color')) == '#7cfc00'){
        $('#HomeStatus1').css("background-color", "#7cfc00");
}

function hexColor(colorval) {
    var parts = colorval.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
    delete(parts[0]);
    for (var i = 1; i <= 3; ++i) {
        parts[i] = parseInt(parts[i]).toString(16);
        if (parts[i].length == 1) parts[i] = '0' + parts[i];
    }
    return '#' + parts.join('');
}​

また、一部のブラウザは、、の後にスペースを含むrgbを返すことに注意してください。

于 2012-11-13T20:27:18.400 に答える
1

これはブラウザ固有の可能性があるようです。

ここで見つかりました：

また、jQueryは、複数の単語のプロパティのCSSおよびDOMフォーマットを同等に解釈できます。たとえば、jQueryは、.css（'background-color'）と.css（'backgroundColor'）の両方の正しい値を理解して返します。異なるブラウザは、論理的には等しいがテキスト的には等しくないCSSカラー値を返す場合があります（例：＃FFF 、、、 #ffffffおよびrgb（255,255,255））。

于 2012-11-13T20:29:35.367 に答える
0

計算された色を比較できるかどうかわかりません。jQueryは文字列認識だけを提供すると思います。また、計算された色はブラウザの実装に依存します。

比較できるのは2つの文字列だけだと思います。要素のbgカラーをフェッチすることはできないと思います。セキュリティ上、適切に計算されることに依存しています。可能かもしれませんが、そのような機能のためには、実装を拡張する必要があると思います。

1つのブラウザが1つのカラー形式を使用できるため、他のブラウザは他のブラウザを使用でき、それらは異なる文字列です。

于 2012-11-13T20:28:00.083 に答える
0

RGB文字列のコンマの間にスペースが必要です。

'rgb(255, 255, 255)'

これが動作するjsfiddleですhttp://jsfiddle.net/Pvt5Z/8/

編集上記はFireFoxとChromeで機能しますが、IE8は、'rgb'文字列に正規化する代わりに、background-colorのcss文字列を返します。

于 2012-11-13T20:34:27.657 に答える
0

問題の一部は、色に複数の文字列表現があることです。

"white"
"rgb(255, 255, 255)"
"#FFFFFF"
"#FFF"

すべて白を表します。

2つの色を比較できるようにするには、同じ形式で、共通の地面に2つの色の両方を取得する必要があります。

jQuery.css()cssカラーを取得するために使用すると、常にRGB形式のカラー文字列が返されます。

この機能を使用して、比較する色をRGB形式でも常に指定することにより、色を比較できます。

次のステートメントは、要素の白の文字列表現に関係なくtrueになります。

element.css("background-color") == "rgb(255, 255, 255)"

16進数に変換することで、色の値を16進数として比較することもできますelement.css("background-color")。

この質問に対する答えは、RGBカラーを16進数に変換するいくつかの方法を示しています。

于 2012-11-13T21:11:08.227 に答える
0

探している背景色の要素がある場合は、2つの背景色を比較できます。

if（document.getElementById（ "myCompare"）。style.backgroundColor == document.getElementById（ "myRef"）。style.backgroundColor）

于 2013-10-23T17:19:30.903 に答える