将颜色值转换为十六进制

标签: JavaScript CSS

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 }
留言板
comments powered by Disqus