在CSS中,有多种形式表示颜色值,例如红色,可用十六进制:#FF0000,或rgb(255,0,0),或颜色关键字red等表示。在符合W3C标准的浏览器下,通过函数getComputedStyle()会返回RGB/RGBA形式的颜色值,但在IE9以下浏览器,由于不支持该函数,必须自行实现颜色值的转换。这里举例大神DE的实现。
1 function toHex(color) {
2 var body = createPopup().document.body,
3 range = body.createTextRange();
4
5 body.style.color = color;
6 //这里用到非常精妙的技巧!!
7 //使用TextRange对象的queryCommandValue获取ForeColor值
8 //可以间接将各种形式颜色值转化成用十进制表示BGR的值
9 //注意是BGR不是RGB,所以后面需要将BGR再转换成RGB
10 var value = range.queryCommandValue("ForeColor");
11 //这里就是将BGR转换成RGB的代码了
12 value = ((value & 0x0000ff) << 16) | (value & 0x00ff00) | ((value & 0xff0000) >>> 16);
13 //将十进制RGB转换成十六进制RGB
14 value = value.toString(16);
15
16 //这里是给十六进制值RGB前面添加必要的前缀
17 return "#000000".slice(0, 7 - value.length) + value;
18 };
还需对支持getComputedStyle返回结果为RGB/RGBA形式的颜色值转换为十六进制,结合DE的代码,以兼容各大浏览器。
1 function getHexColor(node, property){
2 function rgbToHex(color){
3 var match,
4 val = '',
5 //支持rgba,但是由于十六进制是无法表示透明度的,所以透明度值被忽略
6 regex = /rgba?\s*\((\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*(?:,\s*\d(?:\.\d*)?\s*)?\)/i,
7 toHex = function(val){
8 val = (+val).toString(16);
9 return '00'.slice(0, 2 - val.length) + val;
10 }
11 if((match = regex.exec(color))){
12 val = '#';
13 for(var i = 1, length = match.length; i < length; i++){
14 val += toHex(match[i]);
15 }
16 }
17 return val;
18 }
19 function toHex(color) {
20 var body = createPopup().document.body,
21 range = body.createTextRange();
22 body.style.color = color;
23 var value = range.queryCommandValue("ForeColor");
24 value = ((value & 0x0000ff) << 16) | (value & 0x00ff00) | ((value & 0xff0000) >>> 16);
25 value = value.toString(16);
26 return "#000000".slice(0, 7 - value.length) + value;
27 }
28 var val = '';
29 if(window.getComputedStyle){
30 //兼容W3C标准
31 val = (node.ownerDocument || node).defaultView.getComputedStyle(node, null)[property];
32 val = rgbToHex(val);
33 }else{
34 //兼容IE
35 val = node.currentStyle[property];
36 val = toHex(val);
37 }
38 return val.toUpperCase();
39 }