jQuery獲取樣式中顏色值的方法
更新時間：2015年01月29日 14:39:58 作者：穗溪
這篇文章主要介紹了jQuery獲取樣式中顏色值的方法,可實現(xiàn)針對IE與Chrome、Firefox等不同瀏覽器都可獲取css樣式中background-color值的功能,非常具有實用價值,需要的朋友可以參考下
本文實例講述了jQuery獲取樣式中顏色值的方法。分享給大家供大家參考。具體分析如下：
今天使用jQuery獲取樣式中的background-color的值時發(fā)現(xiàn)在獲取到的顏色值在IE中與Chrome、Firefox顯示的格式不一樣，IE中是以HEX格式顯示【#ffff00】，而Chrome、Firefox中則是以GRB格式顯示【rgb(255,0,0)】，由于需要將顏色值存儲到數(shù)據(jù)庫中，所以想讓顏色值的格式統(tǒng)一下（其實不統(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è)計有所幫助。
相關(guān)文章
BootStrap中jQuery插件Carousel實現(xiàn)輪播廣告效果
輪播廣告在網(wǎng)站中的應(yīng)用實在是太常見了，下面說一說怎樣使用bootstrap中的Carousel插件來實現(xiàn)輪播廣告效果,感興趣的朋友一起看看吧2017-03-03
jQuery實現(xiàn)表格行和列的動態(tài)添加與刪除方法【測試可用】
這篇文章主要介紹了jQuery實現(xiàn)表格行和列的動態(tài)添加與刪除方法,涉及jQuery針對頁面元素的動態(tài)添加與刪除相關(guān)技巧,非常簡便實用,需要的朋友可以參考下2016-08-08
這篇文章主要介紹了簡單的jQuery banner圖片輪播實例代碼的相關(guān)資料,需要的朋友可以參考下2016-03-03
jQuery獲取table行數(shù)并輸出單元格內(nèi)容的實現(xiàn)方法
這篇文章主要介紹了jQuery獲取table行數(shù)并輸出單元格內(nèi)容的實現(xiàn)方法,涉及jQuery針對表格與頁面元素的動態(tài)操作技巧,需要的朋友可以參考下2016-06-06
使用js+jquery實現(xiàn)無限極聯(lián)動
本篇文章是對可擴(kuò)展的無限極聯(lián)動下拉選項的實例進(jìn)行了分析介紹，需要的朋友參考下2013-05-05
瀑布流布局有兩種，一種是固定列，一種是非固定列。本文主要記述第一種的實現(xiàn)。需要的朋友可以參考借鑒2016-12-12
jQuery插件echarts實現(xiàn)的多折線圖效果示例【附demo源碼下載】
這篇文章主要介紹了jQuery插件echarts實現(xiàn)的多折線圖效果,結(jié)合完整實例形式分析了echarts插件繪制多折線圖效果的具體步驟與相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03
這篇文章主要介紹了jQuery拖動元素并對元素進(jìn)行重新排序的實現(xiàn)方法，感興趣的小伙伴們可以參考一下2015-12-12
這篇文章主要為大家詳細(xì)介紹了jQuery表單驗證之密碼確認(rèn)的實現(xiàn)代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章主要介紹了jQuery合作伙伴左右滾動特效，功能實現(xiàn)非常簡單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2015-08-08