Jquery中文網 www.2030036.live
Jquery中文網 >  jQuery  >  jquery 教程  >  正文 jQuery獲取CSS樣式中的顏色值的問題,不同瀏覽器格式不同的解決辦法

jQuery獲取CSS樣式中的顏色值的問題,不同瀏覽器格式不同的解決辦法

發布時間:2014-01-09   編輯:www.2030036.live
jQuery獲取CSS樣式中的顏色值的問題,不同瀏覽器格式不同的解決辦法,需要的朋友可以參考一下

使用jquery獲取樣式中的background-color的值時發現在獲取到的顏色值在IE10以下版本中是以HEX格式顯示【#ffff00】,而IE10,、Chrome、Firefox中則是以GRB格式顯示【rgb(255,0,0)】,由于需要對顏色值進行判斷處理,所以需要得到統一的顏色格式,最好是HEX格式的,方便處理點。搜索了一下,從國外的一個網站上得到一段代碼:

復制代碼 代碼如下:

$.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函數,我們可以通過 $("#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獲取樣式中的background-color顏色值的問題
Javascript 將 rgb 顏色值轉換為 16 進制值的代碼
Web 品質樣式表
javascript 獲取元素樣式技巧分析
CSS 簡介
Bootstrap CSS 概覽
JQuery結合CSS操作打印樣式的方法
jquery ajax post提交數據亂碼
js文件中文亂碼怎么辦?解決方法
jQuery中ajax的使用與緩存問題的解決方法

關鍵詞: 顏色值  瀏覽器  格式   
[關閉]
888棋牌金花app 江苏快三综合走势图 云南省十一选五结果 股票如何打新新股申购方法 终于破了11选5出号规律 江苏十一选五下载 上海快3最新开奖上海快三 白小姐的a 辽宁11选五每天开奖多少期 河南快3开奖结果查询 甘肃十一选五今日号码推荐