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程序設計有所幫助。

 

 

 

 

//十六進制顏色值域RGB格式顏色值之間的相互轉換

//-------------------------------------
//十六進制顏色值的正則表達式
var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
/*RGB顏色轉換為16進制*/
String.prototype.colorHex = function(){
    var that = this;
    if(/^(rgb|RGB)/.test(that)){
        var aColor = that.replace(/(?:||rgb|RGB)*/g,"").split(",");
        var strHex = "#";
        for(var i=0; i<aColor.length; i++){
            var hex = Number(aColor[i]).toString(16);
            if(hex === "0"){
                hex += hex;
            }
            strHex += hex;
        }
        if(strHex.length !== 7){
            strHex = that;
        }
        return strHex;
    }else if(reg.test(that)){
        var aNum = that.replace(/#/,"").split("");
        if(aNum.length === 6){
            return that;
        }else if(aNum.length === 3){
            var numHex = "#";
            for(var i=0; i<aNum.length; i+=1){
                numHex += (aNum[i]+aNum[i]);
            }
            return numHex;
        }
    }else{
        return that;
    }
};

//-------------------------------------------------

/*16進制顏色轉為RGB格式*/
String.prototype.colorRgb = function(){
    var sColor = this.toLowerCase();
    if(sColor && reg.test(sColor)){
        if(sColor.length === 4){
            var sColorNew = "#";
            for(var i=1; i<4; i+=1){
                sColorNew += sColor.slice(i,i+1).concat(sColor.slice(i,i+1));
            }
            sColor = sColorNew;
        }
        //處理六位的顏色值
        var sColorChange = [];
        for(var i=1; i<7; i+=2){
            sColorChange.push(parseInt("0x"+sColor.slice(i,i+2)));
        }
        return "RGB(" + sColorChange.join(",") + ")";
    }else{
        return sColor;
    }
};

 

 

 

 

 

2.調用方法

 

 

 

var sRgb = "RGB(255, 255, 255)" , sHex = "#00538b";
var sHexColor = sRgb.colorHex();//轉換為十六進制方法<code></code>
var sRgbColor = sHex.colorRgb();//轉為RGB顏色值的方法

colorHex()表示轉換為十六進制方法，colorRgb()表示轉為RGB顏色值的方法