本文實例講述了jquery實現將獲取的顏色值轉換為十六進制形式的方法。分享給大家供大家參考。具體分析如下：
大家或許已經注意到了，在谷歌、火狐和IE8以上浏覽器中，獲取的顏色值是RGB形式，例如rgb(255,255,0)，感覺非常不適應，或者在實際編碼中不方便使用，這個時候就需要進行轉換，下面就提供一段相關轉換代碼。
具體代碼如下:
代碼如下:<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.cnblogs.com/" />
<title>顏色格式轉換-博客園</title>
<style type="text/css">
#thediv
{
width:200px;
height:100px;
background-color:#CCC;
line-height:100px;
text-align:center;
color:#60F;
}
</style>
<script type="text/javascript" src="jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$.fn.getHexBackgroundColor=function(id,property)
{
var rgb=$(id).css(property);
if($.browser.msie&&$.browser.version>8||$.browser.mozilla||$.browser.webkit)
{
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;
}
$(document).ready(function(){
$("#bt").click(function(){
$("#thediv").text($.fn.getHexBackgroundColor("#thediv","color"))
})
})
</script>
</head>
<body>
<div id="thediv">博客園</div>
<input type="button" value="點擊查看效果" id="bt" />
</body>
</html>
注意:運行編輯器之後，再按F5刷新網頁即可查看演示。
以上代碼實現了我們的要求，可以將RGB格式的顏色值轉換為十六進制形式，下面就簡單介紹一下實現過程:
一.實現原理:
當點擊按鈕的會觸發click事件，進而執行click事件處理函數，此處理函數能夠將轉換後的顏色值寫入div中去，其中的核心函數就是getHexBackgroundColor()，此函數首先會判斷浏覽器是否是IE9之下，如果是則直接返回顏色值，不進行轉換，因為在IE9以下浏覽器獲取的顏色值就是16進制的，如果是IE8以上浏覽器或者谷歌火狐，則需要進行轉換，關於轉換細節這裡就不多介紹了，可以參考你代碼注釋。
二.代碼注釋:
1.$.fn.getHexBackgroundColor=function(id,property){}，聲明一個函數，此函數可以可以進行顏色值轉換，此函數具有兩個參數，第一個參數是元素的id屬性值，第二個是屬性。
2.var rgb=$(id).css(property)，獲取顏色值，這個時候rgb也許是16進制也許是RGB格式的。
3.if($.browser.msie&&$.browser.version>8||$.browser.mozilla||$.browser.webkit)，判斷浏覽器是否是IE8以上或者是火狐或者谷歌浏覽器。
4.rgb=rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/)，這個要對正則表達式有所了解，通過match()函數可以將顏色值字符串生成一個數組，這個數組中有4個元素，以rgb(102, 0, 255)作為例子，第一個元素是整個顏色值字符串rgb(102, 0, 255)，第二個數組元素是102，第三個是0，第四個是255。
5.function hex(x){}，聲明一個函數，此函數可以用就是進行顏色值轉換，具有一個參數，傳遞的是rgb數組的某一項。
6.return ("0"+parseInt(x).toString(16)).slice(-2)，可以將傳入數值轉換為16進制，注意前面是添加了一個0，最好使用slice函數截取最後兩個字符，並返回截取的這兩個字符。
7.rgb="#"+hex(rgb[1])+hex(rgb[2])+hex(rgb[3])，將值組合起來。
8.return rgb，返回rgb這個值。
9.$(document).ready(function(){})，當文檔結構完全加載完畢再去執行函數中的代碼。
10.$("#bt").click(function(){}），為按鈕注冊click事件處理桉樹。
11.$("#thediv").text($.fn.getHexBackgroundColor("#thediv","color")) ，將轉換後的顏色值寫入div。
三.相關閱讀:
1.浏覽器版本判斷可以參閱《JavaScript 判斷浏覽器類型及版本》。
2. parseInt()函數可以參閱《javascript中parseInt()函數的定義和用法分析》。
3.toString()函數可以參閱《javascript中Number對象的toString()方法分析》。
4.slice()函數可以參閱《javascript中String對象的slice()方法分析》。
5.click事件可以參閱《jQuery中click事件的定義和用法》。
6.text()函數可以參閱《jQuery的text()方法用法分析》。
希望本文所述對大家的jQuery程序設計有所幫助。