使用 jquery/javascript 在单击时增加 CSS 亮度颜色？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5833624/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Increase CSS brightness color on click with jquery/javascript?
提问by Teivere
So if I have a text "Click Me to Brighten" that has CSS color property of some dark green hex color like "#00801a" I want to make it so that when I click on it, it makes it a lighter green. Likewise, if it were some blue color, clicking on it would make it lighter blue. Basically I want to know if there is a way to change the css color without knowing the actual color.
因此，如果我有一个文本“Click Me to Brighten”，它具有某种深绿色十六进制颜色的 CSS 颜色属性，例如“#00801a”，我想将其制作成这样，当我点击它时，它会变成浅绿色。同样，如果它是某种蓝色，单击它会使它变浅蓝色。基本上我想知道是否有办法在不知道实际颜色的情况下更改 css 颜色。
回答by BrunoLM
Converting to HSV to change the brigthness
转换为 HSV 以更改亮度
See the full code example on jsFiddle
This version uses HSV. I convert the original rgbvalue to hsvand change the value of vto get a lighter color. I got RgbToHsvfrom Pointy answer, I just added a little fix for gray. And I got HsvToRgbon this website
此版本使用HSV. 我将原始rgb值转换为hsv并更改 的值v以获得更浅的颜色。我RgbToHsv从 Pointy得到了答案，我只是为灰色添加了一些修复。我HsvToRgb上了这个网站
When the page loads I am getting the rgbconverting into hsvchanging the vvalue, convert back to rgband change the cssof the element with the new value.
当页面加载时，我将rgb转换为hsv更改v值，转换回rgb并css使用新值更改元素的 。
function AppendColor(light) {
$(".dark").each(function(i){
// get the RGB from existing elements
var color = $(this).css("background-color");
color = color.replace(/[^0-9,]+/g, "");
var red = color.split(",")[0];
var gre = color.split(",")[1];
var blu = color.split(",")[2];
// convert rgb to hsv
var hsv = RgbToHsv(red,gre,blu);
// convert hsv to rgb modifing the `v` param
var rgb = HsvToRgb(hsv.h, hsv.s, light);
// creates a new div and set the new background
// then appends to the content
color = "rgb(" + rgb.r + "," + rgb.g + "," + rgb.b + ")";
$("<div />")
.css("background", color)
.attr("title", color)
.appendTo($(".light").parent());
$("<span />").html(" ").appendTo($(".light").parent())
});
$("<br />").appendTo($(".light").parent())
}
// tested values
AppendColor(25);
AppendColor(50);
AppendColor(75);
AppendColor(90);
AppendColor(95);
AppendColor(97);
AppendColor(99);
AppendColor(100);
Result:
结果：
Increasing color values by highest color
通过最高颜色增加颜色值
The divson top represents the dark colors (rgb) #801A00, #00801A, #1A0080and #D2D2D2
的divs顶部表示深颜色（RGB） ，，和#801A00#00801A#1A0080#D2D2D2
<div id="red" class="dark red"></div>
<div id="green" class="dark green"></div>
<div id="blue" class="dark blue"></div>
<div id="gray" class="dark gray"></div>
<br />
<div id="lred" class="lred"></div>
<div id="lgreen" class="lgreen"></div>
<div id="lblue" class="lblue"></div>
<div id="lgray" class="lgray"></div>
The divson the bottom will get the light color from the dark.
该divs底部将获得从暗光色。
When I click a dark div it will retrieve the background-color, split the values and send to the function Lighthen. This function will make the color more light.
当我单击一个深色 div 时，它将检索background-color、拆分值并发送到函数Lighthen。此功能将使颜色更亮。
function Lighthen(red, green, blue)
{
var max = ([red,green,blue].sort(function(l,r){return r-l}))[0];
var multiplier = max;
multiplier = (multiplier / 255) + 1;
// if it would still be too dark, make it lighten more
if (multiplier < 1.5) multiplier = 1.9;
// if it gets to white, move away a bit
if ((max * multiplier) > 255)
{
multiplier = (multiplier / 230) + 1;
}
var r = Math.round(red * multiplier);
var g = Math.round(green * multiplier);
var b = Math.round(blue * multiplier);
if (r > 255) r = 255;
if (g > 255) g = 255;
if (b > 255) b = 255;
return "rgb(" + r + "," + g + "," + b + ")";
}
When the dark div is clicked, the new color is calculated and changed on the correspondent div.
单击深色 div 时，会在对应的 上计算并更改新颜色div。
$(".dark").click(function(){
var color = $(this).css("background-color");
color = color.replace(/[^0-9,]+/g, "");
var red = color.split(",")[0];
var gre = color.split(",")[1];
var blu = color.split(",")[2];
$("#l" + $(this).attr("id"))
.css("background", Lighthen(red, gre, blu));
});
Resulting in
导致
回答by Steve Kelly
If it has a white background you could just take the opacity down allowing the white to shine through, thus a brighter shade.
如果它有白色背景，您可以降低不透明度，让白色透过，从而使阴影更亮。
