繁体   English   中英

jQuery的CSS颜色值返回RGB?

[英]jquery css color value returns 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)

如何获得十六进制代码?

***编辑:在这里找到答案:
背景色十六进制到JavaScript变量

真可惜,发帖之前可能会搜索得更好。

一些调整功能

$.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
    }
}

在这里,您可以使用$(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]);
}

这是我的看法。 简单明了。

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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM