изменить цвет по клику - CSS

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

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

Как изменить цвет фона по клику мыши | 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

bitcoin cash https://cryptocurrencyqrcode.com/bitcoincash.html qr code generator online

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *