5

window.getComputedStyle要素の color プロパティで使用すると、最初に色を設定するために使用された構文に関係なく、または値を含む文字列が返されますrgb()rgba()Internet Explorer では、代わりに強制的に使用element.currentStyleすると、最初に設定された色の文字列が返されるようです (ただし、小文字が使用されます)。

これが私の問題のデモンストレーションです:

<div id=el>&nbsp;</div>
<script type="text/javascript">
var el = document.getElementById('el');
el.style.color = 'red';
if (window.getComputedStyle) {
    el.innerHTML = getComputedStyle(el, null).color;
} else {
    el.innerHTML = el.currentStyle.color;
}
</script>

他のブラウザでは「rgb(255, 0, 0)」と表示されます。IEは「赤」を表示します。実際の RGB または RGBA 値を特定したい。だから私は2つの質問があります:

  1. IE で実際の値を取得する方法はありますか? すべての潜在的な色の構文を手動で解析し、色名から値へのマッピングを含める以外に方法はありますか?
  2. 他のブラウザの動作に依存できますか? rgb()またはrgba()文字列として値を返すことになっているの#ff0000でしょうか、それとも , などを返すことができますか?
4

2 に答える 2

3

私の知る限り、答えは「いいえ」です。すべての可能な色表現を解析する方法を知らずに、IE で色の値を取得する簡単な方法はありません。これをやろうとしたとき、 のようなすべての可能な色の名前を認識する必要さえあることがわかりましたblue。それは王室の苦痛でしたが、私はそのためのコードを考え出しました。

私のコードは背景色を取得しようとしていましたが、背景色が設定されている場所を見つけるために親オブジェクトも調べます (そのため、要求したことを正確に実行していません)。getComputedStyle の YUI バージョンを使用しました (代わりに使用できます)。あなた自身のもの)が、これは私が使用したコードです。次の形式の色定義を処理します。

#fff
#ffffff
transparent
rgb(12,45,99)
rgba(12,45,99,30)
orange

そして、コード:

JFL.GetBackgroundColor = function(o)
{
    var colorNames = {
        aliceblue: 'f0f8ff',
        antiquewhite: 'faebd7',
        aqua: '00ffff',
        aquamarine: '7fffd4',
        azure: 'f0ffff',
        beige: 'f5f5dc',
        bisque: 'ffe4c4',
        black: '000000',
        blanchedalmond: 'ffebcd',
        blue: '0000ff',
        blueviolet: '8a2be2',
        brown: 'a52a2a',
        burlywood: 'deb887',
        cadetblue: '5f9ea0',
        chartreuse: '7fff00',
        chocolate: 'd2691e',
        coral: 'ff7f50',
        cornflowerblue: '6495ed',
        cornsilk: 'fff8dc',
        crimson: 'dc143c',
        cyan: '00ffff',
        darkblue: '00008b',
        darkcyan: '008b8b',
        darkgoldenrod: 'b8860b',
        darkgray: 'a9a9a9',
        darkgreen: '006400',
        darkkhaki: 'bdb76b',
        darkmagenta: '8b008b',
        darkolivegreen: '556b2f',
        darkorange: 'ff8c00',
        darkorchid: '9932cc',
        darkred: '8b0000',
        darksalmon: 'e9967a',
        darkseagreen: '8fbc8f',
        darkslateblue: '483d8b',
        darkslategray: '2f4f4f',
        darkturquoise: '00ced1',
        darkviolet: '9400d3',
        deeppink: 'ff1493',
        deepskyblue: '00bfff',
        dimgray: '696969',
        dodgerblue: '1e90ff',
        feldspar: 'd19275',
        firebrick: 'b22222',
        floralwhite: 'fffaf0',
        forestgreen: '228b22',
        fuchsia: 'ff00ff',
        gainsboro: 'dcdcdc',
        ghostwhite: 'f8f8ff',
        gold: 'ffd700',
        goldenrod: 'daa520',
        gray: '808080',
        green: '008000',
        greenyellow: 'adff2f',
        honeydew: 'f0fff0',
        hotpink: 'ff69b4',
        indianred : 'cd5c5c',
        indigo : '4b0082',
        ivory: 'fffff0',
        khaki: 'f0e68c',
        lavender: 'e6e6fa',
        lavenderblush: 'fff0f5',
        lawngreen: '7cfc00',
        lemonchiffon: 'fffacd',
        lightblue: 'add8e6',
        lightcoral: 'f08080',
        lightcyan: 'e0ffff',
        lightgoldenrodyellow: 'fafad2',
        lightgrey: 'd3d3d3',
        lightgreen: '90ee90',
        lightpink: 'ffb6c1',
        lightsalmon: 'ffa07a',
        lightseagreen: '20b2aa',
        lightskyblue: '87cefa',
        lightslateblue: '8470ff',
        lightslategray: '778899',
        lightsteelblue: 'b0c4de',
        lightyellow: 'ffffe0',
        lime: '00ff00',
        limegreen: '32cd32',
        linen: 'faf0e6',
        magenta: 'ff00ff',
        maroon: '800000',
        mediumaquamarine: '66cdaa',
        mediumblue: '0000cd',
        mediumorchid: 'ba55d3',
        mediumpurple: '9370d8',
        mediumseagreen: '3cb371',
        mediumslateblue: '7b68ee',
        mediumspringgreen: '00fa9a',
        mediumturquoise: '48d1cc',
        mediumvioletred: 'c71585',
        midnightblue: '191970',
        mintcream: 'f5fffa',
        mistyrose: 'ffe4e1',
        moccasin: 'ffe4b5',
        navajowhite: 'ffdead',
        navy: '000080',
        oldlace: 'fdf5e6',
        olive: '808000',
        olivedrab: '6b8e23',
        orange: 'ffa500',
        orangered: 'ff4500',
        orchid: 'da70d6',
        palegoldenrod: 'eee8aa',
        palegreen: '98fb98',
        paleturquoise: 'afeeee',
        palevioletred: 'd87093',
        papayawhip: 'ffefd5',
        peachpuff: 'ffdab9',
        peru: 'cd853f',
        pink: 'ffc0cb',
        plum: 'dda0dd',
        powderblue: 'b0e0e6',
        purple: '800080',
        red: 'ff0000',
        rosybrown: 'bc8f8f',
        royalblue: '4169e1',
        saddlebrown: '8b4513',
        salmon: 'fa8072',
        sandybrown: 'f4a460',
        seagreen: '2e8b57',
        seashell: 'fff5ee',
        sienna: 'a0522d',
        silver: 'c0c0c0',
        skyblue: '87ceeb',
        slateblue: '6a5acd',
        slategray: '708090',
        snow: 'fffafa',
        springgreen: '00ff7f',
        steelblue: '4682b4',
        tan: 'd2b48c',
        teal: '008080',
        thistle: 'd8bfd8',
        tomato: 'ff6347',
        turquoise: '40e0d0',
        violet: 'ee82ee',
        violetred: 'd02090',
        wheat: 'f5deb3',
        white: 'ffffff',
        whitesmoke: 'f5f5f5',
        yellow: 'ffff00',
        yellowgreen: '9acd32'
    };
    function parseSingle(s)
    {
        s = s + s;
        return(parseInt(s, 16));
    }
    var color;
    while (o)
    {
        color = YD.getComputedStyle(o, "backgroundColor");
        if (color && color != "transparent")
        {
            break;
        }
        if (o == document.body)
        {
            color = "#ffffff";
            break;
        }
        o = o.parentNode;
    }
    color = color.replace(/ /g, "").toLowerCase();
    if (colorNames[color])
    {
        color = "#" + colorNames[color];
    }
    var r = 256, g = 256, b = 256;
    if (color.indexOf("#") == 0)
    {
        color = color.slice(1);
        if (color.length == 3)
        {
            r = parseSingle(color.slice(0,1));
            g = parseSingle(color.slice(1,2));
            b = parseSingle(color.slice(2,3));
        }
        else if (color.length == 6)
        {
            r = parseInt(color.slice(0,2), 16);
            g = parseInt(color.slice(2,4), 16);
            b = parseInt(color.slice(4,6), 16);
        }
    }
    else if (color.indexOf("rgb") == 0)
    {
        var results = color.match(/^rgba?\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})/);
        if (results && results.length >= 4)
        {
            r = parseInt(results[1], 10);
            g = parseInt(results[2], 10);
            b = parseInt(results[3], 10);
        }
    }
    var luminance = (0.3 * r + 0.59 * g + 0.11 * b) / 256;
    return({r: r, g: g, b: b, luminance: luminance});
}
于 2012-08-07T04:48:31.183 に答える
0

示唆されたように、私は CMS の答えをここで調べましたqueryCommandValue。'backround-color' ではなく CSS の 'color' に相当するものとして、'BackColor' ではなく 'ForeColor' を使用する必要がありましたが、この手法は IE で実際の値を取得するのに完全に機能するようです。

これが私の質問の例の修正された動作バージョンです:

<div id=el>&nbsp;</div>
<script type="text/javascript">
var el = document.getElementById('el');
el.style.color = 'red';
if (window.getComputedStyle) {
    el.innerHTML = getComputedStyle(el, null).color;
} else {
    var oRG = document.body.createTextRange();
    oRG.moveToElementText(el);
    var iClr = oRG.queryCommandValue('ForeColor');
    el.innerHTML = 'rgb('+(iClr & 0xFF)+','+((iClr & 0xFF00)>>8)+','+((iClr & 0xFF0000)>>16)+')';
}
</script>

2 番目の質問に対する回答を探していますが、ないようです。私が正しく読んでいる場合、このページ: http://www.w3.org/TR/css3-color/は、ブラウザーが計算された値に対して、「6 桁の 16 進数値または rgb(.. .) 機能値、アルファ値 1" (?)。と書いてありtransparentますrgba(0,0,0,0)。そして最後に、「他のすべての値については、計算された値が指定された値です」と表示されます。これはまったく明らかではありません。たとえば、RGB 整数を使用する必要がありますか、それともパーセンテージを使用できますか? 値の前後にスペースがありますか? 「指定値」の大文字と小文字を区別することはできますか? hsl()hsla()色はどうですか?

実際には、ブラウザーはrgb(...)orを返すように値を正規化rgba(...)し、赤、緑、青を整数として、アルファを小数として、各コンマの後に単一のスペースを入れますが、これは正式に指定されていないようです. transparent例外として、他の値や設定方法に関係なく、色のアルファ値が 0 の場合、Firefox は値を返すようです。例: rgba(255, 0, 255, 0)

したがって、RGB int を取得するための IE の奇妙な方法は、使用できる場合ははるかに簡単です。

于 2012-08-07T05:35:06.407 に答える