Значение цвета jquery css возвращает RGB?

В моем файле CSS:

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)

Как я могу получить HEX-код?

*** edit: нашел здесь ответ:
шестнадцатеричный цвет фона в переменную JavaScript

Позор мне, можно было бы поискать немного лучше, прежде чем публиковать ..


jquery css hex rgb
person FFish    schedule 15.06.2010    source источник
comment
stackoverflow.com/questions/1740700/   -  person user113716    schedule 16.06.2010
comment
возможный дубликат шестнадцатеричного цвета фона в переменной JavaScript (jQuery)   -  person zzzzBov    schedule 20.01.2011

Ответы (3)


arrow_upward
8
arrow_downward

Некоторые приспосабливаются к работе

$.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
    }
}
person Pedro Muniz    schedule 11.09.2011

arrow_upward
4
arrow_downward

Вот, это позволит вам использовать $ (selector) .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]);
}
person StratusBase LLC    schedule 09.08.2011

arrow_upward
1
arrow_downward

Вот мое мнение. Просто и лаконично.

(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>

person Mr. Polywhirl    schedule 23.02.2017