jQuery的css颜色值返回RGB？

问题描述：

a, a:link, a:visited { color:#4188FB; } 
a:active, a:focus, a:hover { color:#FFCC00; }

我尝试：

var link_col = $("a:link").css("color"); 
alert(link_col); // returns rgb(65, 136, 251)

我怎样才能获得的十六进制代码？

***编辑：在这里找到了答案：
Background-color hex to JavaScript variable

可耻的是我，可能会对搜索发布前好一点..

http://stackoverflow.com/questions/1740700/jquery-get-hex-value-rather-rgb背景色十六进制JavaScript变量的 – user113716 2010-06-15 20:40:03

可能重复（jQuery的） ]（http://stackoverflow.com/questions/638948/background-color-hex-to-javascript-variable-jquery） – zzzzBov 2011-01-19 21:00:12

答

在这里你去，这将允许您使用$（选择）.getHexBackgroundColor（）返回容易的十六进制值：

$.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 "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]); 
}

在ie8失败，请参阅http://stackoverflow.com/a/7380712/21460 – 2011-12-12 23:00:17

答

一些adjustes运作

$.fn.getHexBackgroundColor = function() { 
    var rgb = $(this).css('background-color'); 
    if (!rgb) { 
     return '#FFFFFF'; //default color 
    } 
    var hex_rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/); 
    function hex(x) {return ("0" + parseInt(x).toString(16)).slice(-2);} 
    if (hex_rgb) { 
     return "#" + hex(hex_rgb[1]) + hex(hex_rgb[2]) + hex(hex_rgb[3]); 
    } else { 
     return rgb; //ie8 returns background-color in hex format then it will make     compatible, you can improve it checking if format is in hexadecimal 
    } 
}

答

这是我的要求。简单而简洁。

(function($) { 
 
    $.fn.getHexBackgroundColor = function() { 
 
    return (function(rgb) { 
 
     return '#' + (!rgb 
 
     ? 'FFFFFF' 
 
     : rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/) 
 
      .slice(1) 
 
      .map(x => ('0' + parseInt(x).toString(16)).slice(-2)) 
 
      .join('') 
 
      .toUpperCase()); 
 
    })($(this).css('background-color')); 
 
    } 
 
})(jQuery); 
 

 
$(function() { 
 
    $('#color-rgb').text($('.foo').css('background-color')); 
 
    $('#color-hex').text($('.foo').getHexBackgroundColor()); 
 
});

.foo { 
 
    background: #F74; 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 

 
label { font-weight: bold; } 
 
label:after { content: ': '; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="foo"></div> 
 
<label>RGB</label><span id="color-rgb">UNDEF</span><br /> 
 
<label>HEX</label><span id="color-hex">UNDEF</span>

jQuery的css颜色值返回RGB？

相关推荐