使用jquery / javascript增加CSS亮度颜色？ [英] Increase CSS brightness color on click with jquery/javascript?
问题描述
因此，如果我有一个文本Click Me to Brighten，它有一些深绿色的十六进制颜色的CSS颜色属性，例如＃00801a我想要这样，当我点击它，它使它变成一个更轻的绿色。同样，如果它是一些蓝色，点击它会使它更浅的蓝色。基本上我想知道是否有一种方法来改变css的颜色而不知道实际的颜色。
转换为HSV改变勇气
code>在上面代表暗色（rgb）＃801A00 ，＃00801A ，＃1A0080 和＃D2D2D2
< div id =redclass =dark red>< / div>
< div id =greenclass =dark green>< / div>
< div id =blueclass =dark blue>< / div>
< div id =greyclass =dark grey>< / div>
< br />
< div id =lredclass =lred>< / div>
< div id =lgreenclass =lgreen>< / div>
< div id =lblueclass =lblue>< / div>
< div id =lgrayclass =lgray>< / div>
底部的 divs
当我点击一个黑暗的div，它将检索 background-color 值并发送到函数 Lighthen 。
function Lighthen（red，green，blue）
{
var max =（[red，green，blue] .sort（function（l，r）{return rl}））[0];
var multiplier = max;
multiplier =（multiplier / 255）+1;
//如果它仍然太暗，使它变轻更多
if（multiplier< 1.5）multiplier = 1.9;
//如果它变为白色，移开一点
if（（max * multiplier）> 255）
{
multiplier = ）+ 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;
returnrgb（+ r +，+ g +，+ b +）;
}
点击dark div时，记者 div 。
$ 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））
。 gre，blu））;
}）;
导致
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.
Converting to HSV to change the brigthness
See the full code example on jsFiddle
This version uses HSV. I convert the original rgb value to hsv and change the value of v to get a lighter color. I got RgbToHsv from Pointy answer, I just added a little fix for gray. And I got HsvToRgb on this website
When the page loads I am getting the rgb converting into hsv changing the v value, convert back to rgb and change the css of the element with the new value.
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 divs on top represents the dark colors (rgb) #801A00, #00801A, #1A0080 and #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 divs on the bottom will get the light color from the dark.
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.
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.
$(".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
这篇关于使用jquery / javascript增加CSS亮度颜色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
