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)】，由于需要對顏色值進行判斷處理，所以需要得到統(tǒng)一的顏色格式，最好是HEX格式的，方便處理點。搜索了一下，從國外的一個網(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(); 獲取到標簽id="bg"的background-color的RGB值。
下面做一下小小的修改，就是加一個判斷，如果是顯示HEX值（IE10以下）就直接拿值，如果是非IE瀏覽器則將值轉換成RGB格式：
復制代碼 代碼如下:
$.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;
}
相關文章
下面小編就為大家分享一篇jQuery第一次運行頁面默認觸發(fā)點擊事件的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01
密保通常都會有n個問題，讓用戶選擇其中2、3個，而且都不會讓用戶選擇重復的問題。這就要求密保互斥，具體實現(xiàn)如下，有此需求的朋友可以參考下2013-08-08
這篇文章給大家介紹了jquery easyui刷新當前tabs的方法，本文涉及到param參數(shù)的屬性知識點，本文通過實例給大家介紹的非常詳細，具有參考借鑒價值，感興趣的朋友一起看看吧2016-09-09
在第一次頁面加載時，元素A的X效果正常，點擊B之后，頁面局部刷新，此時，回到A，元素A失去X效果.后來了解了下頁面應用了ASP.NET AJAX局部刷新，這就明朗了，估計是和JQUERY沖突了2013-04-04
當圖片較小時顯示實際大小，當圖片超過div 大小時圖片自動適應div的大小，下面有個示例，大家可以參考下，希望對大家有所幫助2013-08-08
js整數(shù)字符串轉換為金額類型數(shù)據(jù)(示例代碼)
本篇文章主要是對js整數(shù)字符串轉換為金額類型數(shù)據(jù)的示例代碼進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
這篇文章主要介紹了jQuery遍歷Table的具體實現(xiàn),需要的朋友可以參考下2014-04-04
dialog并沒有隨著滾動條往下滾動，這時就需要用戶滑動滾動條來定位dialog，在說出解決方案前先來普及一下jquery關于定位的幾個方法2013-09-09
這篇文章主要介紹了ajax的分頁查詢示例（不刷新頁面），小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-01-01
文字浮動提示效果想必大家都有見到過吧，其實實現(xiàn)起來很賤的，下面為大家詳細介紹下使用jquery是如何做到的，感興趣的朋友可以參考下2013-12-12