快捷導(dǎo)航

jQuery獲取樣式中顏色值的方法

更新時間：2015年01月29日 14:39:58 作者：穗溪

這篇文章主要介紹了jQuery獲取樣式中顏色值的方法,可實(shí)現(xiàn)針對IE與Chrome、Firefox等不同瀏覽器都可獲取css樣式中background-color值的功能,非常具有實(shí)用價值,需要的朋友可以參考下

本文實(shí)例講述了jQuery獲取樣式中顏色值的方法。分享給大家供大家參考。具體分析如下：

今天使用jQuery獲取樣式中的background-color的值時發(fā)現(xiàn)在獲取到的顏色值在IE中與Chrome、Firefox顯示的格式不一樣，IE中是以HEX格式顯示【#ffff00】，而Chrome、Firefox中則是以GRB格式顯示【rgb(255,0,0)】，由于需要將顏色值存儲到數(shù)據(jù)庫中，所以想讓顏色值的格式統(tǒng)一下（其實(shí)不統(tǒng)一也是可以存的）。搜索了一下，從國外的一個網(wǎng)站上得到一段代碼：

$.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函數(shù)，我們可以通過 $("#bg").getHexBackgroundColor(); 獲取到標(biāo)簽id="bg"的background-color的RGB值。

下面做一下小小的修改，就是加一個判斷，如果是IE瀏覽器就直接拿值，如果是非IE瀏覽器則將值轉(zhuǎn)換成RGB格式：

$.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程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

BootStrap中jQuery插件Carousel實(shí)現(xiàn)輪播廣告效果
輪播廣告在網(wǎng)站中的應(yīng)用實(shí)在是太常見了，下面說一說怎樣使用bootstrap中的Carousel插件來實(shí)現(xiàn)輪播廣告效果,感興趣的朋友一起看看吧
2017-03-03
jQuery實(shí)現(xiàn)表格行和列的動態(tài)添加與刪除方法【測試可用】
這篇文章主要介紹了jQuery實(shí)現(xiàn)表格行和列的動態(tài)添加與刪除方法,涉及jQuery針對頁面元素的動態(tài)添加與刪除相關(guān)技巧,非常簡便實(shí)用,需要的朋友可以參考下
2016-08-08
簡單的jQuery banner圖片輪播實(shí)例代碼
這篇文章主要介紹了簡單的jQuery banner圖片輪播實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下
2016-03-03
jQuery獲取table行數(shù)并輸出單元格內(nèi)容的實(shí)現(xiàn)方法
這篇文章主要介紹了jQuery獲取table行數(shù)并輸出單元格內(nèi)容的實(shí)現(xiàn)方法,涉及jQuery針對表格與頁面元素的動態(tài)操作技巧,需要的朋友可以參考下
2016-06-06
使用js+jquery實(shí)現(xiàn)無限極聯(lián)動
本篇文章是對可擴(kuò)展的無限極聯(lián)動下拉選項(xiàng)的實(shí)例進(jìn)行了分析介紹，需要的朋友參考下
2013-05-05
jquery實(shí)現(xiàn)簡單的瀑布流布局
瀑布流布局有兩種，一種是固定列，一種是非固定列。本文主要記述第一種的實(shí)現(xiàn)。需要的朋友可以參考借鑒
2016-12-12
jQuery插件echarts實(shí)現(xiàn)的多折線圖效果示例【附demo源碼下載】
這篇文章主要介紹了jQuery插件echarts實(shí)現(xiàn)的多折線圖效果,結(jié)合完整實(shí)例形式分析了echarts插件繪制多折線圖效果的具體步驟與相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下
2017-03-03
jQuery拖動元素并對元素進(jìn)行重新排序
這篇文章主要介紹了jQuery拖動元素并對元素進(jìn)行重新排序的實(shí)現(xiàn)方法，感興趣的小伙伴們可以參考一下
2015-12-12
jQuery表單驗(yàn)證之密碼確認(rèn)
這篇文章主要為大家詳細(xì)介紹了jQuery表單驗(yàn)證之密碼確認(rèn)的實(shí)現(xiàn)代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-05-05
jQuery實(shí)現(xiàn)圖片左右滾動特效
這篇文章主要介紹了jQuery合作伙伴左右滾動特效，功能實(shí)現(xiàn)非常簡單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2015-08-08