Выбор цвета фона пользователем

530

03 июня 2017, 14:17

Есть код:

body {
    width: 100%;
    height: 100%;
}

Необходимо, чтобы пользователь мог сам выбирать цвет фона сайта, т. е. фона body пользуясь чем-то на подобие Сolor Picker. Подскажите, где можно найти решение? Потом я бы хотел сделать тоже самое, только градиент.

Answer 1

Что-то в роде этого?

var colorPicker = document.getElementById("bgcolor"); 
 
function changebodycolor(){ 
   var colorVal = colorPicker.value; 
   document.body.style.background = colorVal; 
} 
 
colorPicker.addEventListener("change", 
changebodycolor,false);

body {width: 100%; height: 100%;} 
.colorPicker {width: 100px; height: 52px; background-color: blue; margin: 10px; 
text-align: center} 
.colorPicker input {width: 80%; height: 80%; transform: translateY(8%);}

<body> 
<div> 
Выберите цвет для тела документа: 
   <div class="colorPicker"> 
     <input type="color" id="bgcolor"/> 
   </div> 
</div> 
</body>

Но внимание! Не все даже не очень старые браузеры поддерживают input[type=color]. Подробнее: https://caniuse.com/#feat=input-color

Насчет градиента: если линейный градиент, то это не очень сложно (смотря сколько цветов будет в нём – если до 4-х цветов, то особо сложного ничего нет), но если радильный, то это уже запарка серьёзная.

Пример градиента с 4-мя цветами (я уверен это не лучший вариант, жду поправок и критики):

var colorPicker = document.getElementById("bgcolor"); 
var colorVal; 
var buttons = document.querySelectorAll(".colors"); 
var done = document.getElementById("doIt"); 
 
function changebodycolor(){ 
 colorVal = colorPicker.value; 
 document.getElementById("colorContainer").value = colorVal;} 
 
colorPicker.addEventListener("change", 
changebodycolor,false); 
 
for(var i = 0; i < buttons.length; i++){ 
   buttons[i].onclick = function(){ 
      if(colorContainer.value.trim().length < 1) 
   {return false;} 
    
   else { 
        this.innerHTML = colorVal; 
     } 
   }; 
} 
 
doIt.onclick = function(){ 
   var gradient = "linear-gradient(to top," 
   + buttons[0].innerHTML + "," 
   + buttons[1].innerHTML  + "," 
   + buttons[2].innerHTML  + "," 
   + buttons[3].innerHTML  + ")"; 
   document.body.style.background = gradient; 
 };

body {width: 100%; height: 100%;} 
.colorPicker {width: 100px; height: 52px; background-color: blue; margin: 10px; 
text-align: center} 
.colorPicker input {width: 80%; height: 80%; transform: translateY(8%);}

<body> 
<div> 
Выберите цвет для тела документа:<br/> 
Тип: градиент 
   <div class="colorPicker"> 
     <input type="color" id="bgcolor"/><br/> 
     <input type="hidden" id="colorContainer" value=""/> 
   </div> 
     <button class="colors">Цвет 1</button> 
     <button class="colors">Цвет 2</button> 
     <button class="colors">Цвет 3</button> 
     <button class="colors">Цвет 4</button> 
     <button id="doIt">Применить</button> 
</div> 
</body>

Answer 2

У JQuery есть уже готовые решения. Например. jQuery Color Picker.

Скачать здесь: download jQuery Color Picker

Как встраивать: manual jQuery Color Picker

Другие варианты: Other