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

2.调用方法

[javascript] view plain copy
 
  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颜色值的方法

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/libin-1/p/6726730.html