Форум

madeas · #1 (**permalink**) 19.05.2018, 18:53

Всем привет.
Подскажите, можно ли при помощи js создать на своем сайте input, чтобы пользователи могли вводить произвольные цвета, например, #f4f4f4 и при этом менялся фон сайта?
Спасибо.

рони · #2 (**permalink**) 19.05.2018, 19:21

Сообщение от madeas

можно ли

да

рони · #3 (**permalink**) 19.05.2018, 19:58

madeas,
document.body.style.backgroundColor

j0hnik · #4 (**permalink**) 19.05.2018, 22:43

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		body{
			background-color: red;
			transition: 2s;
		}
	</style>
</head>
<body>
	<input type="text" id="fon"> Цвет фона <button id="but">сменить</button>
	<script>
		document.getElementById('but').onclick = e => document.body.style.backgroundColor = document.getElementById('fon').value;
	</script>
</body>
</html>

j0hnik · #5 (**permalink**) 19.05.2018, 22:53

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	цвет фона <br>
	<input type="range" class="color" min="0" max="255" value="255">R<br>
	<input type="range" class="color" min="0" max="255" value="255">G<br>
	<input type="range" class="color" min="0" max="255" value="255">B<br>
	<script>

		var col = document.querySelectorAll('.color');
		[].forEach.call(col, function(el){
			el.oninput =e=> document.body.style.backgroundColor = `rgb(${col[0].value},${col[1].value},${col[2].value})`;
		});

	</script>
</body>
</html>

j0hnik · #6 (**permalink**) 19.05.2018, 22:56

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		body{
			background-color: red;
			transition: 2s;
		}
	</style>
</head>
<body>
	<input type="color" id="fon"> Цвет фона
	<script>
		document.getElementById('fon').onchange= e => document.body.style.backgroundColor = e.target.value;
	</script>
</body>
</html>

j0hnik · #7 (**permalink**) 19.05.2018, 23:00

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		body{
			transition: 2s;
		}
	</style>
</head>
<body>
	Цвет фона
	<select name="" id="fon">
	<option value="white">white</option>
	<option value="red">red</option>
	<option value="green">green</option>
	<option value="blue">blue</option>
	</select>
	<script>
		document.getElementById('fon').onchange= e => document.body.style.backgroundColor = e.target.value;
	</script>
</body>
</html>

рони · #8 (**permalink**) 19.05.2018, 23:28

j0hnik,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    body{
        transition: .3s;
    }

    </style>
</head>
<body>
    цвет фона <br>
    <input type="range" class="color" min="0" max="255" value="255">R<br>
    <input type="range" class="color" min="0" max="255" value="255">G<br>
    <input type="range" class="color" min="0" max="255" value="255">B<br>
    <script>
        var col = [...document.querySelectorAll('.color')];
        col.forEach(el => el.oninput =e=> document.body.style.backgroundColor = `rgb(${col.map(e => e.value)})`);
    </script>
</body>
</html>

madeas · #9 (**permalink**) 18.07.2018, 13:21

Не буду плодить темы, спрошу здесь.
Подскажите, как из этого кода вывести в div id="res" значение выбранного цвета? Например, если пользователь выбрал #333333

<input type="color" id="fon">
<div id="colors"></div>
<div id="res"></div>
<script>
document.getElementById('fon').onchange= e => document.getElementById('colors').style.backgroundColor = e.target.value;
</script>

j0hnik · #10 (**permalink**) 18.07.2018, 13:34

document.getElementById('fon').onchange =e=> {
	document.getElementById('res').textContent = e.target.value;
	document.getElementById('colors').style.backgroundColor = e.target.value;
}

Форум

Справочник

Discord чат

Курсы javascript