jquery获取css颜色值返回RGB应用

我来给大家介绍一下在jquery获取css颜色值返回RGB方法，希望此文章对各位同学会有所帮助哦。

 

代码如下：

代码如下	复制代码
a, a:link, a:visited { color:#4188FB; }  a:active, a:focus, a:hover { color:#FFCC00; }

js代码如下：

代码如下	复制代码
var link_col = $("a:link").css("color");  alert(link_col); // returns rgb(65, 136, 251)

jquey貌似设置颜色，使用的是rgb格式的。

用以下这个function，把rgb转成“#xxxx”(HEX )格式。

代码如下

复制代码

var rgbString = "rgb(0, 70, 255)"; // get this in whatever way.  var parts = rgbString          .match(/^rgb((d+),s*(d+),s*(d+))$/)  ;  // parts now should be ["rgb(0, 70, 255", "0", "70", "255"]  delete (parts[0]);  for (var i = 1; i <= 3; ++i) {      parts[i] = parseInt(parts[i]).toString(16);      if (parts[i].length == 1) parts[i] = '0' + parts[i];  }  var hexString = parts.join(''); // "0070ff"

或者用这个function

代码如下	复制代码
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]);  }

补充一下

获取CSS样式中的颜色值的问题,不同浏览器格式不同的解决办法

使用jQuery获取样式中的background-color的值时发现在获取到的颜色值在IE10以下版本中是以HEX格式显示【#ffff00】，而IE10,、Chrome、Firefox中则是以GRB格式显示【rgb(255,0,0)】，由于需要对颜色值进行判断处理，所以需要得到统一的颜色格式，最好是HEX格式的，方便处理点。搜索了一下，从国外的一个网站上得到一段代码：

代码如下	复制代码
$.fn.getHexBackgroundColor = function() {     var rgb = $(this).css('background-color');     rgb = rgb.match(/^rgb((d+),s*(d+),s*(d+))$/);     function hex(x) {return ("0" + parseInt(x).toString(16)).slice(-2);}     return rgb= "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]); }

上面定义的是一个jQuery函数，我们可以通过 $("#bg").getHexBackgroundColor(); 获取到标签id="bg"的background-color的RGB值。

下面做一下小小的修改，就是加一个判断，如果是显示HEX值（IE10以下）就直接拿值，如果是非IE浏览器则将值转换成RGB格式：

代码如下	复制代码
$.fn.getBackgroundColor = function() {      var rgb = $(this).css('background-color');      if(rgb >= 0) return rgb;//如果是一个hex值则直接返回     else{          rgb = rgb.match(/^rgb((d+),s*(d+),s*(d+))$/);          function hex(x) {return ("0" + parseInt(x).toString(16)).slice(-2);}          rgb= "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);      }      return rgb;  }

本文实例讲述了jQuery获取样式中颜色值的方法。分享给大家供大家参考。具体分析如下：

今天使用jQuery获取样式中的background-color的值时发现在获取到的颜色值在IE中与Chrome、Firefox显示的格式不一样，IE中是以HEX格式显示【#ffff00】，而Chrome、Firefox中则是以GRB格式显示【rgb(255,0,0)】，由于需要将颜色值存储到数据库中，所以想让颜色值的格式统一下（其实不统一也是可以存的）。搜索了一下，从国外的一个网站上得到一段代码：

?

1 2 3 4 5 6

$.fn.getHexBackgroundColor = function() {  var rgb = $(this).css('background-color');  rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);  function hex(x) {return ("0" + parseInt(x).toString(16)).slice(-2);}  return rgb= "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]); }

上面定义的是一个jQuery函数，我们可以通过 $("#bg").getHexBackgroundColor(); 获取到标签id="bg"的background-color的RGB值。

下面做一下小小的修改，就是加一个判断，如果是IE浏览器就直接拿值，如果是非IE浏览器则将值转换成RGB格式：

?

1 2 3 4 5 6 7 8 9

$.fn.getHexBackgroundColor = function() {  var rgb = $(this).css('background-color');  if(!$.browser.msie){   rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);   function hex(x) {return ("0" + parseInt(x).toString(16)).slice(-2);}   rgb= "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);  }  return rgb; }

希望本文所述对大家的jQuery程序设计有所帮助。

1. //十六进制颜色值域RGB格式颜色值之间的相互转换
2. //-------------------------------------
3. //十六进制颜色值的正则表达式
4. var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
5. /*RGB颜色转换为16进制*/
6. String.prototype.colorHex = function(){
7. var that = this;
8. if(/^(rgb|RGB)/.test(that)){
9. var aColor = that.replace(/(?:||rgb|RGB)*/g,"").split(",");
10. var strHex = "#";
11. for(var i=0; i<aColor.length; i++){
12. var hex = Number(aColor[i]).toString(16);
13. if(hex === "0"){
14. hex += hex;
15. }
16. strHex += hex;
17. }
18. if(strHex.length !== 7){
19. strHex = that;
20. }
21. return strHex;
22. }else if(reg.test(that)){
23. var aNum = that.replace(/#/,"").split("");
24. if(aNum.length === 6){
25. return that;
26. }else if(aNum.length === 3){
27. var numHex = "#";
28. for(var i=0; i<aNum.length; i+=1){
29. numHex += (aNum[i]+aNum[i]);
30. }
31. return numHex;
32. }
33. }else{
34. return that;
35. }
36. };
37. //-------------------------------------------------
38. /*16进制颜色转为RGB格式*/
39. String.prototype.colorRgb = function(){
40. var sColor = this.toLowerCase();
41. if(sColor && reg.test(sColor)){
42. if(sColor.length === 4){
43. var sColorNew = "#";
44. for(var i=1; i<4; i+=1){
45. sColorNew += sColor.slice(i,i+1).concat(sColor.slice(i,i+1));
46. }
47. sColor = sColorNew;
48. }
49. //处理六位的颜色值
50. var sColorChange = [];
51. for(var i=1; i<7; i+=2){
52. sColorChange.push(parseInt("0x"+sColor.slice(i,i+2)));
53. }
54. return "RGB(" + sColorChange.join(",") + ")";
55. }else{
56. return sColor;
57. }
58. };

2.调用方法

1. var sRgb = "RGB(255, 255, 255)" , sHex = "#00538b";
2. var sHexColor = sRgb.colorHex();//转换为十六进制方法<code></code>
3. var sRgbColor = sHex.colorRgb();//转为RGB颜色值的方法

colorHex()表示转换为十六进制方法，colorRgb()表示转为RGB颜色值的方法