如何获得十六进制颜色值而不是RGB值?
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何获得十六进制颜色值而不是RGB值?相关的知识,希望对你有一定的参考价值。
使用以下jQuery将获得元素背景颜色的RGB值:
$('#selector').css('backgroundColor');
有没有办法获得十六进制值而不是RGB?
var hexDigits = new Array
("0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f");
//Function to convert rgb color to hex format
function rgb2hex(rgb) {
rgb = rgb.match(/^rgb((d+),s*(d+),s*(d+))$/);
return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}
function hex(x) {
return isNaN(x) ? "00" : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16];
}
(Qazxswpoi)
以十六进制返回元素的背景颜色的函数。
$.cssHooks.backgroundColor = {
get: function(elem) {
if (elem.currentStyle)
var bg = elem.currentStyle["backgroundColor"];
else if (window.getComputedStyle) {
var bg = document.defaultView.getComputedStyle(elem,
null).getPropertyValue("background-color");
}
if (bg.search("rgb") == -1) {
return bg;
} else {
bg = bg.match(/d+/g);
function hex(x) {
return ("0" + parseInt(x).toString(16)).slice(-2);
}
return "#" + hex(bg[0]) + hex(bg[1]) + hex(bg[2]);
}
}
}
用法示例:
function getBgColorHex(elem){
var color = elem.css('background-color')
var hex;
if(color.indexOf('#')>-1){
//for IE
hex = color;
} else {
var rgb = color.match(/d+/g);
hex = '#'+ ('0' + parseInt(rgb[0], 10).toString(16)).slice(-2) + ('0' + parseInt(rgb[1], 10).toString(16)).slice(-2) + ('0' + parseInt(rgb[2], 10).toString(16)).slice(-2);
}
return hex;
}
$('#div1').click(function(){
alert(getBgColorHex($(this));
}
相同的答案jsfiddle但ES6语法,因此,更少的说明:
like @Jim F answer
只是添加到@ Justin的答案上面..
它应该是
const rgb2hex = (rgb) => {
if (rgb.search("rgb") === -1) return rgb;
rgb = rgb.match(/^rgba?((d+),s*(d+),s*(d+)(?:,s*(d+))?)$/);
const hex = (x) => ("0" + parseInt(x).toString(16)).slice(-2);
return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
};
由于上面的解析int函数截断前导零,因此产生5或4个字母的错误颜色代码可能是...即对于rgb(216,160,10),它产生#d8a0a,而它应该是#d8a00a。
谢谢
这是我发现的一个解决方案,它不会在IE中引发脚本错误:var rgb = document.querySelector('#selector').style['background-color'];
return '#' + rgb.substr(4, rgb.indexOf(')') - 4).split(',').map((color) => String("0" + parseInt(color).toString(16)).slice(-2)).join('');
由于问题是使用JQuery,这里是一个基于Daniel Elliott代码的JQuery插件:
http://haacked.com/archive/2009/12/29/convert-rgb-to-hex.aspx
使用它像:
$.fn.cssAsHex = function(colorProp) {
var hexDigits = '0123456789abcdef';
function hex(x) {
return isNaN(x) ? '00' : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16];
};
// Convert RGB color to Hex format
function rgb2hex(rgb) {
var rgbRegex = rgb.match(/^rgb((d+),s*(d+),s*(d+))$/);
return '#' + hex(rgbRegex[1]) + hex(rgbRegex[2]) + hex(rgbRegex[3]);
};
return rgb2hex(this.css(colorProp));
};
这是我的解决方案,也通过使用参数来检查var hexBackgroundColor = $('#myElement').cssAsHex('background-color');
并检查提供的字符串中的其他可能的空格和大小写。
touppercase
在var a = "rgb(10, 128, 255)";
var b = "rgb( 10, 128, 255)";
var c = "rgb(10, 128, 255 )";
var d = "rgb ( 10, 128, 255 )";
var e = "RGB ( 10, 128, 255 )";
var f = "rgb(10,128,255)";
var g = "rgb(10, 128,)";
var rgbToHex = (function () {
var rx = /^rgbs*(s*(d+)s*,s*(d+)s*,s*(d+)s*)$/i;
function pad(num) {
if (num.length === 1) {
num = "0" + num;
}
return num;
}
return function (rgb, uppercase) {
var rxArray = rgb.match(rx),
hex;
if (rxArray !== null) {
hex = pad(parseInt(rxArray[1], 10).toString(16)) + pad(parseInt(rxArray[2], 10).toString(16)) + pad(parseInt(rxArray[3], 10).toString(16));
if (uppercase === true) {
hex = hex.toUpperCase();
}
return hex;
}
return;
};
}());
console.log(rgbToHex(a));
console.log(rgbToHex(b, true));
console.log(rgbToHex(c));
console.log(rgbToHex(d));
console.log(rgbToHex(e));
console.log(rgbToHex(f));
console.log(rgbToHex(g));
jsfiddle的速度比较
进一步改进可能是jsperf trim()
字符串
rgb
Steven Pribilinskiy的答案会降低前导零,例如#ff0000成为#ff00。
一种解决方案是在最后2位数后附加前导0和子串。
var rxArray = rgb.trim().match(rx),
我美丽的非标准解决方案
var rgb = $('#selector').css('backgroundColor').match(/d+/g);
var hex = '#'+ String('0' + Number(rgb[0]).toString(16)).slice(-2) + String('0' + Number(rgb[1]).toString(16)).slice(-2) + String('0' + Number(rgb[2]).toString(16)).slice(-2);
jQuery的
<div id="selector" style="background-color:#f5b405"></div>
结果
$("#selector").attr("style").replace("background-color:", "");
这是我根据@Matt建议写的更清洁的解决方案:
Source
某些浏览器已将颜色返回为十六进制(从Internet Explorer 8及更低版本开始)。如果你需要处理这些情况,只需在函数内附加一个条件,比如@gfrobenius建议:
function rgb2hex(rgb) {
rgb = rgb.match(/^rgb((d+),s*(d+),s*(d+))$/);
function hex(x) {
return ("0" + parseInt(x).toString(16)).slice(-2);
}
return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}
如果你正在使用jQuery并想要一个更完整的方法,你可以使用自jQuery 1.4.3以来可用的function rgb2hex(rgb) {
if (/^#[0-9A-F]{6}$/i.test(rgb)) return rgb;
rgb = rgb.match(/^rgb((d+),s*(d+),s*(d+))$/);
function hex(x) {
return ("0" + parseInt(x).toString(16)).slice(-2);
}
return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}
,就像我在回答这个问题时所展示的那样:CSS Hooks
使用时,大多数浏览器似乎都会返回RGB值:
Can I force jQuery.css("backgroundColor") returns on hexadecimal format?
只有I.E(到目前为止只测试了6个)返回Hex值。
要避免在I.E中出现错误消息,可以将函数包装在if语句中:
$('#selector').css('backgroundColor');
更新了@ErickPetru以获得rgba兼容性:
function rgb2hex(rgb) {
if ( rgb.search("rgb") == -1 ) {
return rgb;
} else {
rgb = rgb.match(/^rgba?((d+),s*(d+),s*(d+)(?:,s*(d+))?)$/);
function hex(x) {
return ("0" + parseInt(x).toString(16)).slice(-2);
}
return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}
}
我更新了正则
以上是关于如何获得十六进制颜色值而不是RGB值?的主要内容,如果未能解决你的问题,请参考以下文章
imgcolorallocate包装器,允许十六进制值而不是RGB
如何使matlab图形的数据提示显示图像灰度颜色而不是其RGB值?