将I任意形式颜色值(如rgb/颜色关键字)转化成十六进制
2013-10-13 00:03
148 查看
在css中,有多种形式表示颜色值,比如同一个红色,可用十六进制:#FF0000,或RGB:rgb(255,0,0),或颜色关键字:red等表示。在符合W3C标准的浏览器下,通过函数getComputedStyle()会返回RGB/RGBA形式的颜色值,但在IE9以下浏览器,由于不支持该函数,必须自行实现颜色值的转换。这里举例大神DE的实现。
还需需要对支持getComputedStyle函数返回结果为RGB形式的颜色值转换成十六进制,结合DE的代码,以兼容各个浏览器
function toHex(color) { var body = createPopup().document.body, range = body.createTextRange(); body.style.color = color; //这里用到非常精妙的技巧!! //使用TextRange对象的queryCommandValue获取ForeColor值 //可以间接将各种形式颜色值转化成用十进制表示BGR的值 //注意是BGR不是RGB,所以后面需要将BGR再转换成RGB var value = range.queryCommandValue("ForeColor"); //这里就是将BGR转换成RGB的代码了 value = ((value & 0x0000ff) << 16) | (value & 0x00ff00) | ((value & 0xff0000) >>> 16); //将十进制RGB转换成十六进制RGB value = value.toString(16); //这里是给十六进制值RGB前面添加必要的前缀 return "#000000".slice(0, 7 - value.length) + value; };
还需需要对支持getComputedStyle函数返回结果为RGB形式的颜色值转换成十六进制,结合DE的代码,以兼容各个浏览器
function getHexColor(node, property){ function rgbToHex(color){ var match, val = '', //支持rgba,但是由于十六进制是无法表示透明度的,所以透明度值被忽略 regex = /rgba?\s*\((\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*(?:,\s*\d(?:\.\d*)?\s*)?\)/i, toHex = function(val){ val = (+val).toString(16); return '00'.slice(0, 2 - val.length) + val; } if((match = regex.exec(color))){ val = '#'; for(var i = 1, length = match.length; i < length; i++){ val += toHex(match[i]); } } return val; } function toHex(color) { var body = createPopup().document.body, range = body.createTextRange(); body.style.color = color; var value = range.queryCommandValue("ForeColor"); value = ((value & 0x0000ff) << 16) | (value & 0x00ff00) | ((value & 0xff0000) >>> 16); value = value.toString(16); return "#000000".slice(0, 7 - value.length) + value; } var val = ''; if(window.getComputedStyle){ //兼容W3C标准 val = (node.ownerDocument || node).defaultView.getComputedStyle(node, null)[property]; val = rgbToHex(val); }else{ //兼容IE val = node.currentStyle[property]; val = toHex(val); } return val.toUpperCase(); }
相关文章推荐
- android 十进制颜色值转化为十六进制颜色值的方法
- 将十进制整数转化为十六进制字符串形式
- 将一个任意输入的10进制数转化为16进制形式输出
- 将一个任意输入的10进制数转化为16进制形式输出
- jxl 自定义背景颜色——十六进制转化为Colour
- IOS中如何将十六进制颜色的字符串转化为UIColor
- Javascript的代码,具体要求为将任意小数转化为分数的形式
- iOS开发中十六进制颜色与RGB的相互转化
- 十六进制颜色转化
- jquery实现将获取的颜色值转换为十六进制形式的方法
- 根据颜色获取相应的字符串形式的十六进制值
- js实现十六进制颜色转化成rgb颜色
- iOS开发之十六进制颜色数据转化为UIColor对象
- jquery实现将获取的颜色值转换为十六进制形式的方法
- 任意二进制文件和十六进制相互转化工具
- jxl 自定义背景颜色——十六进制转化为Colour
- 将一个字节转化成十六进制形式的字符串
- 任意数二进制转化
- 利用中断16H,显示按下的某个键的扫描码和ASCII码(以十六进制形式),以及这个字符(如果存在可显示的形式),直到按下ESC键后程序退出。(别人的作业,我帮着做的)
- android 常见颜色值(16制颜色码)