1

Есть код:

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

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

2 ответа 2

2

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

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>

4
  • Да, отлично, именно то, что надо, благодарю Вас!)
    – user250973
    2 июн 2017 в 9:56
  • один вопрос - как зафиксировать этот фон? Т.е. чтобы он не создавался вновь при прокручивании... я добавил в css строчку: position: fixed;, но не помогло
    – user250973
    2 июн 2017 в 12:25
  • @user250973 background-position: center; background-size: cover; background-attachment: fixed; background-repeat: no-repeat; и все это для body пропиши. И еще: почитай эту статью на хабре, будет полезной.
    – Eugen Eray
    2 июн 2017 в 13:17
  • полезная статья, да.. изменил по ней.. но правда всё равно прокручивается.. т.е. у меня и до этого если фон картинка, то она фиксирована, и сейчас после изменений из хабра картинка фиксирована, а вот градиент прокручивается
    – user250973
    2 июн 2017 в 13:49
0

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

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

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

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

1
  • Как будто в html5 нет
    – Alex78191
    2 июн 2017 в 7:56

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.