jQuery獲取CSS樣式中的顏色值的問題

weixin_33816946發表於2017-04-28
jQueryCSS

轉自：http://blog.csdn.net/cwj649956781/article/details/23261529

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;
 }
 
 
 

RGB顏色轉換十六進位制顏色
轉換程式僅適合IE核心瀏覽器
 

RGB顏色轉換為十六進位制顏色：
     
　

十六進位制顏色轉換為RGB顏色：
   
　


十六進位制顏色查詢
顏   色 英文程式碼 形象描述 十六進位制 RGB
  LightPink 淺粉紅 #FFB6C1 255,182,193
  Pink 粉紅 #FFC0CB 255,192,203
  Crimson 猩紅 #DC143C 220,20,60
  LavenderBlush 臉紅的淡紫色 #FFF0F5 255,240,245
  PaleVioletRed 蒼白的紫羅蘭紅色 #DB7093 219,112,147
  HotPink 熱情的粉紅 #FF69B4 255,105,180
  DeepPink 深粉色 #FF1493 255,20,147
  MediumVioletRed 適中的紫羅蘭紅色 #C71585 199,21,133
  Orchid 蘭花的紫色 #DA70D6 218,112,214
  Thistle 薊 #D8BFD8 216,191,216
  plum 李子 #DDA0DD 221,160,221
  Violet 紫羅蘭 #EE82EE 238,130,238
  Magenta 洋紅 #FF00FF 255,0,255
  Fuchsia 燈籠海棠(紫紅色) #FF00FF 255,0,255
  DarkMagenta 深洋紅色 #8B008B 139,0,139
  Purple 紫色 #800080 128,0,128
  MediumOrchid 適中的蘭花紫 #BA55D3 186,85,211
  DarkVoilet 深紫羅蘭色 #9400D3 148,0,211
  DarkOrchid 深蘭花紫 #9932CC 153,50,204
  Indigo 靛青 #4B0082 75,0,130
  BlueViolet 深紫羅蘭的藍色 #8A2BE2 138,43,226
  MediumPurple 適中的紫色 #9370DB 147,112,219
  MediumSlateBlue 適中的板岩暗藍灰色 #7B68EE 123,104,238
  SlateBlue 板岩暗藍灰色 #6A5ACD 106,90,205
  DarkSlateBlue 深巖暗藍灰色 #483D8B 72,61,139
  Lavender 熏衣草花的淡紫色 #E6E6FA 230,230,250
  GhostWhite 幽靈的白色 #F8F8FF 248,248,255
  Blue 純藍 #0000FF 0,0,255
  MediumBlue 適中的藍色 #0000CD 0,0,205
  MidnightBlue 午夜的藍色 #191970 25,25,112
  DarkBlue 深藍色 #00008B 0,0,139
  Navy 海軍藍 #000080 0,0,128
  RoyalBlue 皇軍藍 #4169E1 65,105,225
  CornflowerBlue 矢車菊的藍色 #6495ED 100,149,237
  LightSteelBlue 淡鋼藍 #B0C4DE 176,196,222
  LightSlateGray 淺石板灰 #778899 119,136,153
  SlateGray 石板灰 #708090 112,128,144
  DoderBlue 道奇藍 #1E90FF 30,144,255
  AliceBlue 愛麗絲藍 #F0F8FF 240,248,255
  SteelBlue 鋼藍 #4682B4 70,130,180
  LightSkyBlue 淡藍色 #87CEFA 135,206,250
  SkyBlue 天藍色 #87CEEB 135,206,235
  DeepSkyBlue 深天藍 #00BFFF 0,191,255
  LightBLue 淡藍 #ADD8E6 173,216,230
  PowDerBlue 火藥藍 #B0E0E6 176,224,230
  CadetBlue 軍校藍 #5F9EA0 95,158,160
  Azure 蔚藍色 #F0FFFF 240,255,255
  LightCyan 淡青色 #E1FFFF 225,255,255
  PaleTurquoise 蒼白的綠寶石 #AFEEEE 175,238,238
  Cyan 青色 #00FFFF 0,255,255
  Aqua 水綠色 #00FFFF 0,255,255
  DarkTurquoise 深綠寶石 #00CED1 0,206,209
  DarkSlateGray 深石板灰 #2F4F4F 47,79,79
  DarkCyan 深青色 #008B8B 0,139,139
  Teal 水鴨色 #008080 0,128,128
  MediumTurquoise 適中的綠寶石 #48D1CC 72,209,204
  LightSeaGreen 淺海洋綠 #20B2AA 32,178,170
  Turquoise 綠寶石 #40E0D0 64,224,208
  Auqamarin 綠玉\碧綠色 #7FFFAA 127,255,170
  MediumAquamarine 適中的碧綠色 #00FA9A 0,250,154
  MediumSpringGreen 適中的春天的綠色 #F5FFFA 245,255,250
  MintCream 薄荷奶油 #00FF7F 0,255,127
  SpringGreen 春天的綠色 #3CB371 60,179,113
  SeaGreen 海洋綠 #2E8B57 46,139,87
  Honeydew 蜂蜜 #F0FFF0 240,255,240
  LightGreen 淡綠色 #90EE90 144,238,144
  PaleGreen 蒼白的綠色 #98FB98 152,251,152
  DarkSeaGreen 深海洋綠 #8FBC8F 143,188,143
  LimeGreen 酸橙綠 #32CD32 50,205,50
  Lime 酸橙色 #00FF00 0,255,0
  ForestGreen 森林綠 #228B22 34,139,34
  Green 純綠 #008000 0,128,0
  DarkGreen 深綠色 #006400 0,100,0
  Chartreuse 查特酒綠 #7FFF00 127,255,0
  LawnGreen 草坪綠 #7CFC00 124,252,0
  GreenYellow 綠黃色 #ADFF2F 173,255,47
  OliveDrab 橄欖土褐色 #556B2F 85,107,47
  Beige 米色(淺褐色) #6B8E23 107,142,35
  LightGoldenrodYellow 淺秋麒麟黃 #FAFAD2 250,250,210
  Ivory 象牙 #FFFFF0 255,255,240
  LightYellow 淺黃色 #FFFFE0 255,255,224
  Yellow 純黃 #FFFF00 255,255,0
  Olive 橄欖 #808000 128,128,0
  DarkKhaki 深卡其布 #BDB76B 189,183,107
  LemonChiffon 檸檬薄紗 #FFFACD 255,250,205
  PaleGodenrod 灰秋麒麟 #EEE8AA 238,232,170
  Khaki 卡其布 #F0E68C 240,230,140
  Gold 金 #FFD700 255,215,0
  Cornislk 玉米色 #FFF8DC 255,248,220
  GoldEnrod 秋麒麟 #DAA520 218,165,32
  FloralWhite 花的白色 #FFFAF0 255,250,240
  OldLace 老飾帶 #FDF5E6 253,245,230
  Wheat 小麥色 #F5DEB3 245,222,179
  Moccasin 鹿皮鞋 #FFE4B5 255,228,181
  Orange 橙色 #FFA500 255,165,0
  PapayaWhip 番木瓜 #FFEFD5 255,239,213
  BlanchedAlmond 漂白的杏仁 #FFEBCD 255,235,205
  NavajoWhite Navajo白 #FFDEAD 255,222,173
  AntiqueWhite 古代的白色 #FAEBD7 250,235,215
  Tan 曬黑 #D2B48C 210,180,140
  BrulyWood 結實的樹 #DEB887 222,184,135
  Bisque (濃湯)乳脂,番茄等 #FFE4C4 255,228,196
  DarkOrange 深橙色 #FF8C00 255,140,0
  Linen 亞麻布 #FAF0E6 250,240,230
  Peru 祕魯 #CD853F 205,133,63
  PeachPuff 桃色 #FFDAB9 255,218,185
  SandyBrown 沙棕色 #F4A460 244,164,96
  Chocolate 巧克力 #D2691E 210,105,30
  SaddleBrown 馬鞍棕色 #8B4513 139,69,19
  SeaShell 海貝殼 #FFF5EE 255,245,238
  Sienna 黃土赭色 #A0522D 160,82,45
  LightSalmon 淺鮮肉(鮭魚)色 #FFA07A 255,160,122
  Coral 珊瑚 #FF7F50 255,127,80
  OrangeRed 橙紅色 #FF4500 255,69,0
  DarkSalmon 深鮮肉(鮭魚)色 #E9967A 233,150,122
  Tomato 番茄 #FF6347 255,99,71
  MistyRose 薄霧玫瑰 #FFE4E1 255,228,225
  Salmon 鮮肉(鮭魚)色 #FA8072 250,128,114
  Snow 雪 #FFFAFA 255,250,250
  LightCoral 淡珊瑚色 #F08080 240,128,128
  RosyBrown 玫瑰棕色 #BC8F8F 188,143,143
  IndianRed 印度紅 #CD5C5C 205,92,92
  Red 純紅 #FF0000 255,0,0
  Brown 棕色 #A52A2A 165,42,42
  FireBrick 耐火磚 #B22222 178,34,34
  DarkRed 深紅色 #8B0000 139,0,0
  Maroon 栗色 #800000 128,0,0
  White 純白 #FFFFFF 255,255,255
  WhiteSmoke 白煙 #F5F5F5 245,245,245
  Gainsboro Gainsboro #DCDCDC 220,220,220
  LightGrey 淺灰色 #D3D3D3 211,211,211
  Silver 銀白色 #C0C0C0 192,192,192
  DarkGray 深灰色 #A9A9A9 169,169,169
  Gray 灰色 #808080 128,128,128
  DimGray 暗淡的灰色 #696969 105,105,105
  Black 純黑 #000000 0,0,0

相關文章