
Как изменить цвет фона по клику мыши | CSS | JS
Сегодня мы испечем вкусняшку для визуала: мини-палитру с цветовыми блоками, с помощью которых пользователь сможет изменить цвет фона самого body по клику мыши. И помогут нам в этом CSS и JS!
При создании мини-палитры будем руководствоваться мини-ТЗ:
Техническое задание:
- Создать палитру с 5 разными цветами: #b3e5fc, #ffcdd2, #b39ddb, #c5e1a5, #ffcc80. Палитра должна располагаться в верхнем правом углу страницы.
- При клике левой кнопкой мыши на ячейку палитры с каким-либо цветом, фон страницы (body) должен менять цвет на выбранный.
Ингредиенты: HTML, CSS, JavaScript
Рецепт приготовления:
1. Откроем html-файл, который планируется дополнить цветовой палитрой. У меня это стандартная html-разметка пустой страницы:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Изменение цвета фона по клику мыши</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
</body>
</html>
2. Создадим блок с классом class=«color-panel», в котором расположим 5 блоков для ячеек палитры. Для каждой ячейки добавим «говорящий» идентификатор и атрибут data-color, значением которого будет HTML — код цвета ячейки:
<div class="color-panel">
<div id="blue" data-color="#b3e5fc"> </div>
<div id="red" data-color="#ffcdd2"> </div>
<div id="purple" data-color="#b39ddb"> </div>
<div id="green" data-color="#c5e1a5"> </div>
<div id="orange" data-color="#ffcc80"> </div>
</div>
Подробнее о свойстве data-color вы можете узнать из статьи: http://htmlbook.ru/blog/atribut-data
3. Самое время заглянуть в CSS-файл и задать странице стили:
/* Задаем цвет фона по умолчанию */
body{
background-color: #b2ebf2;
}
/* Позиционируем палитру так, чтобы она располагалась в правом верхнем углу страницы */
.color-panel {
position: absolute; /* задаем абсолютное позиционирование */
top: 0px; /* прижимаем палитру к верхней части страницы */
right: 30px; /* создаем внешний отступ справа */
background-color: #fff;
height: 60px;
padding: 15px 5px 5px 5px; /* задаем внутренние отступы */
-webkit-box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.35); /* добавим тень*/
-moz-box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.35);
box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.35);
border-radius: 0px 0px 30px 30px; /* закруглим края панели */
}
/* Зададим размеры ячейкам таблицы, закруглим их и прижмем к левому краю панели */
.color-panel div {
height: 50px;
width: 50px;
border-radius: 30px;
float:left;
margin: 5px;
}
/* Для каждого блока с «цветным» идентификатором зададим соответствующий названию цвет фона */
#blue{
background-color: #b3e5fc;
}
#red{
background-color: #ffcdd2;
}
#purple{
background-color: #b39ddb;
}
#green{
background-color: #c5e1a5;
}
#orange{
background-color: #ffcc80;
}
В результате применения CSS стилей получим цветовую панель симпатичного вида, но абсолютно не способную изменять цвет фона по клику мыши.
4. Добавим панели кликабельности с помощью JavaScript! Пусть каждая ее ячейка реагирует на клик левой кнопки мыши! Для этого в <div> каждой ячейки добавим вызов функции, меняющей цвет фона. Параметром этой функции будет название идентификатора блока, а саму функцию назовем ChangeColor:
<div class="color-panel">
<div id="blue" data-color="#b3e5fc" onclick="changeColor('blue')">
</div>
<div id="red" data-color="#ffcdd2" onclick="changeColor('red')">
</div>
<div id="purple" data-color="#b39ddb" onclick="changeColor('purple')">
</div>
<div id="green" data-color="#c5e1a5" onclick="changeColor('green')">
</div>
<div id="orange" data-color="#ffcc80" onclick="changeColor('orange')">
</div>
</div>
5. Приступим к написанию функции changeColor():
С помощью выражения document.body.style.background мы подберемся к свойству background-color для body. Остается лишь присвоить этому свойству нужное значение. А нужное значение мы получим прочитав значение атрибута data-color у выбранного блока. Напомню, что идентификатор выбранного блока передается в качестве параметра функции changeColor. Поэтому сначала мы подберемся к выбранному блоку: document.getElementById(colorValue), а затем прочитаем значение его атрибута data-color: document.getElementById(colorValue).dataset.color.
Запишем результат наших измышлений в одну емкую строку:
<script>
function changeColor(colorValue) {
document.body.style.background = document.getElementById(colorValue).dataset.color;
}
</script>
6. А теперь самое время проверить результат работы и радостно хлопнуть в ладоши, ведь у вас, наверняка, все получилось 😉
Cкачать файлы с кодом можно по ссылке: Change_background_files.zip