스크립트에서 CSS 색상 속성의 실제 값 가져 오기

Question

요소의 색상 속성에 window.getComputedStyle을 사용하면 색상을 설정하는 데 사용 된 구문에 관계없이 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 값을 결정하고 싶습니다. 따라서 두 가지 질문이 있습니다 :

1. 잠재적 인 색 구문을 수동으로 구문 분석하고 색상 이름을 값에 매핑하는 것을 포함하여 IE에서 실제 값을 얻는 방법이 있습니까?
2. 다른 브라우저의 동작에 의존 할 수 있습니까? rgb() 또는 rgba() 문자열을 반환해야합니까? 예를 들어 #ff0000과 같이 반환 할 수 있습니까?

Answer 1

최선을 다할 수있는 대답은 "아니오"입니다. 가능한 모든 색상 표현을 구문 분석하는 방법을 모른 채 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}); 
} 

Answer 2

으로 내가 queryCommandValue를 사용하여 CMS의 대답 here을 조사 제안했다. '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> 

하지만 하나가 될 것 같지 않습니다. 올바르게 읽으면이 페이지 : http://www.w3.org/TR/css3-color/은 브라우저가 계산 된 값에 대해 "6 자리 16 진수 값 또는 rgb (...) 함수 값을 알파 값 1"(?)으로 반환 할 수 있다고 설명합니다. . transparent은 rgba(0,0,0,0)을 반환합니다. 마지막으로 "다른 모든 값의 경우 계산 된 값이 지정된 값입니다"라고 표시됩니다. 이것은 전혀 명확하지 않습니다. 예 : RGB 정수를 사용해야합니까, 아니면 백분율을 사용할 수 있습니까? 값 주변에 공간이있을 수 있습니까? "지정된 값"의 대소 문자를 보존 할 수 있습니까? hsl()과 hsla()은 어떨까요? 실제로

,이 보이지 않지만 브라우저, 각 쉼표 뒤에 하나의 공간, 정수로 빨간색 - 녹색 - 파란색과 진수로 알파, rgb(...) 또는 rgba(...)을 반환 할 값을 정상화 것으로 보인다 정식으로 명기된다.예외로 파이어 폭스는 다른 값이나 설정 방법과 상관없이 색상의 알파 값이 0 인 경우 transparent을 반환합니다. 예 : rgba(255, 0, 255, 0).

그래서, 당신이 그것을 사용할 수 있다면 IE는 RGB int를 얻기위한 이상한 방법입니다.