Разделение rgb каналов по своим переменным.
Добрый день уважаемые. Довольно детский вопрос, но чёт не могу придумать как разделить циферки :cray:
Есть такой пример https://jsfiddle.net/BlackStar1991/nynj0k29/ Как для каждого блока вытянуть значения цвета фона в переменные r g b, что б в последующем с ними можно было проводить какие то операции ? |
Black_Star,
/\d+/g |
Цитата:
|
Black_Star,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.block{
width: 150px;
height: 150px;
}
.one{
background-color: rgb(255, 250, 44);
}
.two{
background-color: rgb(5, 250, 44);
}
.three{
background-color: rgb(25, 250, 144);
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
$("div").each(function(indx, el){
var color = $(el).css("backgroundColor");
$(this).html(color.match(/\d+/g).join(" "))
});
});
</script>
</head>
<body>
<div class="block one"></div>
<div class="block two"></div>
<div class="block three"></div>
</body>
</html>
|
Black_Star,
es6
$(function() {
$("div").each(function(indx, el){
let color = $(el).css("backgroundColor"),
[r,g,b] = color.match(/\d+/g);
$(this).text([r,g,b])
});
});
|
Спасибо, конечно, рони, но чёт всё равно осталось недопонимание. :-?
Вот допустим для первого блока я хочу канал r уменьшить на 200 g уменьшить на 100 b увеличить на 70 Как это сделать? Что мы делаем в этой строке? [r,g,b] = color.match(/\d+/g); Засовываем параметрам, составляющим массив, значения из атрибутов фона? Или как? |
Black_Star,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.block{
width: 150px;
height: 150px;
}
.one{
background-color: rgb(255, 250, 44);
}
.two{
background-color: rgb(5, 250, 44);
}
.three{
background-color: rgb(25, 250, 144);
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
function fn(num)
{
return num < 0 ? 0 : num > 255 ? 255 : num
}
$("div").each(function(indx, el){
let color = $(el).css("backgroundColor"),
[r,g,b] = color.match(/\d+/g);
r -= 200;
g -= 100;
b = +b + 70;
$(this).text(color +'\nrgb('+[r,g,b].map(fn)+')' )
});
});
</script>
</head>
<body>
<div class="block one"></div>
<div class="block two"></div>
<div class="block three"></div>
</body>
</html>
|
Спасибо, рони выглядит очень круто :thanks:
|
| Часовой пояс GMT +3, время: 08:56. |