快捷導(dǎo)航

jquery實(shí)現(xiàn)將獲取的顏色值轉(zhuǎn)換為十六進(jìn)制形式的方法

更新時(shí)間：2014年12月20日 14:22:42 投稿：shichen2014

這篇文章主要介紹了jquery實(shí)現(xiàn)將獲取的顏色值轉(zhuǎn)換為十六進(jìn)制形式的方法,包含了完整的實(shí)例與關(guān)鍵代碼的注釋說(shuō)明,并附帶了所需知識(shí)點(diǎn)的參考文章地址,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了jquery實(shí)現(xiàn)將獲取的顏色值轉(zhuǎn)換為十六進(jìn)制形式的方法。分享給大家供大家參考。具體分析如下：

大家或許已經(jīng)注意到了，在谷歌、火狐和IE8以上瀏覽器中，獲取的顏色值是RGB形式，例如rgb(255,255,0)，感覺(jué)非常不適應(yīng)，或者在實(shí)際編碼中不方便使用，這個(gè)時(shí)候就需要進(jìn)行轉(zhuǎn)換，下面就提供一段相關(guān)轉(zhuǎn)換代碼。

具體代碼如下:

復(fù)制代碼代碼如下:

<!DOCTYPE html> 

<html> 

<head> 

<meta charset=" utf-8"> 

<meta name="author" content="http://www.fzitv.net/" /> 

<title>顏色格式轉(zhuǎn)換-腳本之家</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="點(diǎn)擊查看效果" id="bt" /> 

</body> 

</html>

注意:運(yùn)行編輯器之后，再按F5刷新網(wǎng)頁(yè)即可查看演示。

以上代碼實(shí)現(xiàn)了我們的要求，可以將RGB格式的顏色值轉(zhuǎn)換為十六進(jìn)制形式，下面就簡(jiǎn)單介紹一下實(shí)現(xiàn)過(guò)程:

一.實(shí)現(xiàn)原理:

當(dāng)點(diǎn)擊按鈕的會(huì)觸發(fā)click事件，進(jìn)而執(zhí)行click事件處理函數(shù)，此處理函數(shù)能夠?qū)⑥D(zhuǎn)換后的顏色值寫(xiě)入div中去，其中的核心函數(shù)就是getHexBackgroundColor()，此函數(shù)首先會(huì)判斷瀏覽器是否是IE9之下，如果是則直接返回顏色值，不進(jìn)行轉(zhuǎn)換，因?yàn)樵贗E9以下瀏覽器獲取的顏色值就是16進(jìn)制的，如果是IE8以上瀏覽器或者谷歌火狐，則需要進(jìn)行轉(zhuǎn)換，關(guān)于轉(zhuǎn)換細(xì)節(jié)這里就不多介紹了，可以參考你代碼注釋。

二.代碼注釋:

1.$.fn.getHexBackgroundColor=function(id,property){}，聲明一個(gè)函數(shù)，此函數(shù)可以可以進(jìn)行顏色值轉(zhuǎn)換，此函數(shù)具有兩個(gè)參數(shù)，第一個(gè)參數(shù)是元素的id屬性值，第二個(gè)是屬性。

2.var rgb=$(id).css(property)，獲取顏色值，這個(gè)時(shí)候rgb也許是16進(jìn)制也許是RGB格式的。

3.if($.browser.msie&&$.browser.version>8||$.browser.mozilla||$.browser.webkit)，判斷瀏覽器是否是IE8以上或者是火狐或者谷歌瀏覽器。

4.rgb=rgb.match(/^rgb$(\d+),\s*(\d+),\s*(\d+)$$/)，這個(gè)要對(duì)正則表達(dá)式有所了解，通過(guò)match()函數(shù)可以將顏色值字符串生成一個(gè)數(shù)組，這個(gè)數(shù)組中有4個(gè)元素，以rgb(102, 0, 255)作為例子，第一個(gè)元素是整個(gè)顏色值字符串rgb(102, 0, 255)，第二個(gè)數(shù)組元素是102，第三個(gè)是0，第四個(gè)是255。

5.function hex(x){}，聲明一個(gè)函數(shù)，此函數(shù)可以用就是進(jìn)行顏色值轉(zhuǎn)換，具有一個(gè)參數(shù)，傳遞的是rgb數(shù)組的某一項(xiàng)。

6.return ("0"+parseInt(x).toString(16)).slice(-2)，可以將傳入數(shù)值轉(zhuǎn)換為16進(jìn)制，注意前面是添加了一個(gè)0，最好使用slice函數(shù)截取最后兩個(gè)字符，并返回截取的這兩個(gè)字符。

7.rgb="#"+hex(rgb[1])+hex(rgb[2])+hex(rgb[3])，將值組合起來(lái)。

8.return rgb，返回rgb這個(gè)值。

9.$(document).ready(function(){})，當(dāng)文檔結(jié)構(gòu)完全加載完畢再去執(zhí)行函數(shù)中的代碼。

10.$("#bt").click(function(){}），為按鈕注冊(cè)click事件處理桉樹(shù)。

11.$("#thediv").text($.fn.getHexBackgroundColor("#thediv","color")) ，將轉(zhuǎn)換后的顏色值寫(xiě)入div。

三.相關(guān)閱讀:

1.瀏覽器版本判斷可以參閱《JavaScript 判斷瀏覽器類(lèi)型及版本》。
2. parseInt()函數(shù)可以參閱《javascript中parseInt()函數(shù)的定義和用法分析》。
3.toString()函數(shù)可以參閱《javascript中Number對(duì)象的toString()方法分析》。
4.slice()函數(shù)可以參閱《javascript中String對(duì)象的slice()方法分析》。
5.click事件可以參閱《jQuery中click事件的定義和用法》。
6.text()函數(shù)可以參閱《jQuery的text()方法用法分析》。

希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: