19.01.2017, 20:26
|
 |
Профессор
|
|
Регистрация: 11.07.2016
Сообщений: 300
|
|
|
Разделение rgb каналов по своим переменным.
Добрый день уважаемые. Довольно детский вопрос, но чёт не могу придумать как разделить циферки 
Есть такой пример https://jsfiddle.net/BlackStar1991/nynj0k29/
Как для каждого блока вытянуть значения цвета фона в переменные r g b, что б в последующем с ними можно было проводить какие то операции ? |
|
19.01.2017, 21:01
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
|
Black_Star,
/\d+/g
|
|
19.01.2017, 21:10
|
|
Профессор
|
|
Регистрация: 11.07.2016
Сообщений: 300
|
|
Здесь что то по эльфийски я не понимаю |
|
19.01.2017, 21:15
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
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>
|
|
19.01.2017, 21:20
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
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])
});
});
|
|
19.01.2017, 22:06
|
|
Профессор
|
|
Регистрация: 11.07.2016
Сообщений: 300
|
|
Спасибо, конечно, рони, но чёт всё равно осталось недопонимание. 
Вот допустим для первого блока я хочу канал r уменьшить на 200 g уменьшить на 100 b увеличить на 70 Как это сделать?
Что мы делаем в этой строке? [r,g,b] = color.match(/\d+/g);
Засовываем параметрам, составляющим массив, значения из атрибутов фона? Или как? |
|
19.01.2017, 22:20
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
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>
Последний раз редактировалось рони, 19.01.2017 в 22:26.
|
|
20.01.2017, 12:33
|
|
Профессор
|
|
Регистрация: 11.07.2016
Сообщений: 300
|
|
Спасибо, рони выглядит очень круто  |
|
|
|
