jQuery獲取CSS樣式中的顏色值的問題,不同瀏覽器格式不同的解決辦法
更新時間：2013年05月13日 09:55:23 作者：
jQuery獲取CSS樣式中的顏色值的問題,不同瀏覽器格式不同的解決辦法，需要的朋友可以參考一下
使用jQuery獲取樣式中的background-color的值時發(fā)現(xiàn)在獲取到的顏色值在IE10以下版本中是以HEX格式顯示【#ffff00】，而IE10,、Chrome、Firefox中則是以GRB格式顯示【rgb(255,0,0)】，由于需要對顏色值進(jìn)行判斷處理，所以需要得到統(tǒng)一的顏色格式，最好是HEX格式的，方便處理點。搜索了一下，從國外的一個網(wǎng)站上得到一段代碼：
復(fù)制代碼 代碼如下:
$.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值。
下面做一下小小的修改，就是加一個判斷，如果是顯示HEX值（IE10以下）就直接拿值，如果是非IE瀏覽器則將值轉(zhuǎn)換成RGB格式：
復(fù)制代碼 代碼如下:
$.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;
}
相關(guān)文章
相信大部分人都上過淘寶網(wǎng)吧，里面有個這個效果，當(dāng)鼠標(biāo)移動到小圖上面，顯示大圖。2011-09-09
這篇文章主要為大家詳細(xì)介紹了jQuery實現(xiàn)計算器功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10
jQuery getJSON 處理json數(shù)據(jù)的代碼
Ashx處理程序:如果需要返回json格式的對象，需要把mime類型設(shè)置為："application/json"。2010-07-07
jQuery EasyUI基礎(chǔ)教程之EasyUI常用組件(推薦)
這篇文章主要介紹了jQuery EasyUI基礎(chǔ)教程之EasyUI常用組件(推薦),非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-07-07
jquery實現(xiàn)簡單手風(fēng)琴菜單效果實例
這篇文章主要介紹了jquery實現(xiàn)簡單手風(fēng)琴菜單效果的方法,實例分析了jQuery操作頁面樣式、html頁面布局及SCSS樣式設(shè)置的相關(guān)技巧,需要的朋友可以參考下2015-06-06
這篇文章主要介紹了jQuery知識點整理的相關(guān)資料,需要的朋友可以參考下2015-01-01
jQuery給指定的table動態(tài)添加刪除行的操作方法
今天在項目中，剛好用到給指定的table添加一行、刪除一行。添加一行，支持在任意行添加一行且可配置的，刪除一行支持動態(tài)刪除一行。本文給大家介紹的非常詳細(xì)，一起看看吧2016-10-10
jQuery AJAX實現(xiàn)調(diào)用頁面后臺方法和web服務(wù)定義的方法分享
jQuery AJAX實現(xiàn)調(diào)用頁面后臺方法和web服務(wù)定義的方法分享，需要的朋友可以參考下2012-03-03
下面小編就為大家?guī)硪黄獪\談JQuery+ajax+jsonp 跨域訪問。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
這篇文章主要介紹了jQuery層疊選擇器用法,結(jié)合實例形式分析了jQuery層疊選擇器功能、用法及相關(guān)操作注意事項,需要的朋友可以參考下2019-06-06