Как изменить цвет фона по клику мыши | CSS | JS

Изменение цвета фона по клику мыши
Изменение цвета фона по клику мыши | CSS

Сегодня мы испечем вкусняшку для визуала: мини-палитру с цветовыми блоками, с помощью которых пользователь сможет изменить цвет фона самого 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

Добавить комментарий