jQuery獲取CSS樣式中的顏色值的問(wèn)題,不同瀏覽器格式不同的解決辦法
更新時(shí)間：2013年05月13日 09:55:23 作者：
jQuery獲取CSS樣式中的顏色值的問(wèn)題,不同瀏覽器格式不同的解決辦法，需要的朋友可以參考一下
使用jQuery獲取樣式中的background-color的值時(shí)發(fā)現(xiàn)在獲取到的顏色值在IE10以下版本中是以HEX格式顯示【#ffff00】，而IE10,、Chrome、Firefox中則是以GRB格式顯示【rgb(255,0,0)】，由于需要對(duì)顏色值進(jìn)行判斷處理，所以需要得到統(tǒng)一的顏色格式，最好是HEX格式的，方便處理點(diǎn)。搜索了一下，從國(guó)外的一個(gè)網(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]);
}
上面定義的是一個(gè)jQuery函數(shù)，我們可以通過(guò) $("#bg").getHexBackgroundColor(); 獲取到標(biāo)簽id="bg"的background-color的RGB值。
下面做一下小小的修改，就是加一個(gè)判斷，如果是顯示HEX值（IE10以下）就直接拿值，如果是非IE瀏覽器則將值轉(zhuǎn)換成RGB格式：
復(fù)制代碼 代碼如下:
$.fn.getBackgroundColor = function() {
var rgb = $(this).css('background-color');
if(rgb >= 0) return rgb;//如果是一個(gè)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)文章
jQuery第一次運(yùn)行頁(yè)面默認(rèn)觸發(fā)點(diǎn)擊事件的實(shí)例
下面小編就為大家分享一篇jQuery第一次運(yùn)行頁(yè)面默認(rèn)觸發(fā)點(diǎn)擊事件的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
jQuery實(shí)現(xiàn)密?；コ鈫?wèn)題解決方案
密保通常都會(huì)有n個(gè)問(wèn)題，讓用戶選擇其中2、3個(gè)，而且都不會(huì)讓用戶選擇重復(fù)的問(wèn)題。這就要求密?；コ?，具體實(shí)現(xiàn)如下，有此需求的朋友可以參考下2013-08-08
jQuery easyui刷新當(dāng)前tabs的方法
這篇文章給大家介紹了jquery easyui刷新當(dāng)前tabs的方法，本文涉及到param參數(shù)的屬性知識(shí)點(diǎn)，本文通過(guò)實(shí)例給大家介紹的非常詳細(xì)，具有參考借鑒價(jià)值，感興趣的朋友一起看看吧2016-09-09
在第一次頁(yè)面加載時(shí)，元素A的X效果正常，點(diǎn)擊B之后，頁(yè)面局部刷新，此時(shí)，回到A，元素A失去X效果.后來(lái)了解了下頁(yè)面應(yīng)用了ASP.NET AJAX局部刷新，這就明朗了，估計(jì)是和JQUERY沖突了2013-04-04
jquery中加載圖片自適應(yīng)大小主要實(shí)現(xiàn)代碼
當(dāng)圖片較小時(shí)顯示實(shí)際大小，當(dāng)圖片超過(guò)div 大小時(shí)圖片自動(dòng)適應(yīng)div的大小，下面有個(gè)示例，大家可以參考下，希望對(duì)大家有所幫助2013-08-08
js整數(shù)字符串轉(zhuǎn)換為金額類型數(shù)據(jù)(示例代碼)
本篇文章主要是對(duì)js整數(shù)字符串轉(zhuǎn)換為金額類型數(shù)據(jù)的示例代碼進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-12-12
這篇文章主要介紹了jQuery遍歷Table的具體實(shí)現(xiàn),需要的朋友可以參考下2014-04-04
jquery easyui滾動(dòng)條部分設(shè)置介紹
dialog并沒(méi)有隨著滾動(dòng)條往下滾動(dòng)，這時(shí)就需要用戶滑動(dòng)滾動(dòng)條來(lái)定位dialog，在說(shuō)出解決方案前先來(lái)普及一下jquery關(guān)于定位的幾個(gè)方法2013-09-09
這篇文章主要介紹了ajax的分頁(yè)查詢示例（不刷新頁(yè)面），小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-01-01
利用jQuary實(shí)現(xiàn)文字浮動(dòng)提示效果示例代碼
文字浮動(dòng)提示效果想必大家都有見(jiàn)到過(guò)吧，其實(shí)實(shí)現(xiàn)起來(lái)很賤的，下面為大家詳細(xì)介紹下使用jquery是如何做到的，感興趣的朋友可以參考下2013-12-12