如何使用 jquery 将 rgb 值转换为十六进制颜色？
[英]how can i convert rgb value to hex color using jquery?
问题描述
I am trying to get color of div on clicking it, for that i have created 4 div and gave different color to each div, i want to get color of div when i click on it.
我试图在单击时获取 div 的颜色，为此我创建了 4 个 div 并为每个 div 赋予了不同的颜色，我想在单击它时获取 div 的颜色。 I am getting color in rgb values, i want it in hexadecimal, please help me.我在 rgb 值中获取颜色，我想要十六进制，请帮助我。
Please let me know how can i convert the rgb value i am getting into hexadecimal using jquery only.请让我知道如何仅使用 jquery 将我获得的 rgb 值转换为十六进制。
<html>
<head>
<style>
#first {
background-color: red;
height: 50px;
width: 50px;
/*display: none;*/
}
#second {
background-color: green;
height: 50px;
width: 50px;
/*display: none;*/
}
#third {
background-color: yellow;
height: 50px;
width: 50px;
/*display: none;*/
}
#fourth {
background-color: blue;
height: 50px;
width: 50px;
/*display: none;*/
}
#flip,
#slide {
padding: 5px;
text-align: center;
background-color: #e5eecc;
border: solid 1px #c3c3c3;
}
#slide {
padding: 50px;
display: none;
}
p {
margin-top: 20px;
padding: 5px;
border: 2px solid #666;
}
</style>
<script src="jquery/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
$("#first").animate({
left: '250px'
});
$("#second").animate({
left: '200px'
});
$("#third").animate({
left: '150px'
});
$("#fourth").animate({
left: '100px'
});
});
});
$(document).ready(function() {
$("#flip").click(function() {
$("#slide").slideToggle("slow");
});
});
$(function() {
$("div").click(function() {
var color = $(this).css("background-color");
$("p").html(color);
});
});
</script>
</head>
<body>
<div id="first" style="position: relative;">
</div>
<div id="second" style="position: relative;">
</div>
<div id="third" style="position: relative;">
</div>
<div id="fourth" style="position: relative;">
</div>
<p> </p>
<button type="button">Event</button>
<div id="flip">Click To Slide down</div>
<div id="slide">Welcome To Slide</div>
</body>
</html>```
3 个解决方案
解决方案1
3 2019-03-06 06:55:49
You can use below function to convert your values. 您可以使用以下函数转换您的值。
var hexDigits =["0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"];
var hex= function(x) {
return isNaN(x) ? "00" : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16];
}
//Function to convert rgb color to hex format
function rgb2hex(rgb) {
rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}
解决方案2
2 2019-03-06 06:26:12
Please try this function. 请尝试此功能。
function RGB2Color(r,g,b)
{
return '#' + this.byte2Hex(r) + this.byte2Hex(g) + this.byte2Hex(b);
}
function byte2Hex (n)
{
var nybHexString = "0123456789ABCDEF";
return String(nybHexString.substr((n >> 4) & 0x0F,1)) + nybHexString.substr(n & 0x0F,1);
}
解决方案3
2 2019-03-06 06:28:53
You could write a Javascript function, which will take the r,g,b values and spit out the hex value. 您可以编写一个Javascript函数，它将获取r，g，b值并吐出十六进制值。 I found a solution on following website: https://campushippo.com/lessons/how-to-convert-rgb-colors-to-hexadecimal-with-javascript-78219fdb 我在以下网站上找到了解决方案： https ： //campushippo.com/lessons/how-to-convert-rgb-colors-to-hexadecimal-with-javascript-78219fdb
var rgbToHex = function(rgb) {
var hex = Number(rgb).toString(16);
if (hex.length < 2) {
hex = "0" + hex;
}
return hex;
};
var fullColorHex = function(r, g, b) {
var red = rgbToHex(r);
var green = rgbToHex(g);
var blue = rgbToHex(b);
return red + green + blue;
};
you can use it like following example: 您可以像下面的示例一样使用它：
fullColorHex(10, 20, 30);
// returns color code 0a141e
解决方案4
0 2019-03-06 06:22:01
You can try this 你可以试试这个
function rgb2hex(rgb){
rgb = rgb.match(/^rgb((d+),s*(d+),s*(d+))$/);
return "#" +
("0" + parseInt(rgb[1],10).toString(16)).slice(-2) +
("0" + parseInt(rgb[2],10).toString(16)).slice(-2) +
("0" + parseInt(rgb[3],10).toString(16)).slice(-2);
}
for more vist More info here 更多信息更多信息请点击此处
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.