Смена цвета через js - мы можем поменять цвет, либо при наведении, либо при клике(onclick). разберем несколько способов менять цвет с помощью javascript.
Заменить цвет у элемента с помощью javascript
- Сменить цвет(background) при наведении мышки javascript
- Изменить цвет(background) нажав по элементу.
- Изменение цвета (background) javascript скриптом
- Изменение цвета (background) кнопки javascript
- js при клике менять background
Сменить цвет(background) при наведении мышки javascript
Для того, чтобы сделать сменяемость цвета с помощью javascript, при наведении мышки...Нам понадобится:
Нам понадобится элемент DOM div,
добавим style
+ width
+ height
+ id
и получим:
Нам понадобится: script
+ onmouseover - когда мышка будет попадать на элемент,
И когда мышка будет покидать элемент - onmouseleave и внутри функций, в зависимости от действия будем изменять цвет, или возвращать первоначальный:
example.onmouseover = function() {
example.style.background= "red";
};
example.onmouseleave = function() {
example.style.background= "yellow";
};
</script>
Результат замены цвета при наведении мышки на элемент:
Изменить цвет(background) нажав по элементу.
В этом пункте разберем замену background цвета по клику с расположением js кода внутри тега.
Для того, чтобы изменить цвет элемента нажав по нему, нам понадобится, как и в выше проведенном пункте:
Пусть это будет элемент DOM div,
добавим style
+ width
+ height
добавим onclick
и this,
Соберем это все в одн целое:
Результат замены цвета при клике на элемент:
Для того, чтобы увидеть изменение цвета элемента при нажатии на него нажмите по блоку!
Изменение цвета (background) javascript скриптом
Выше я уже рассмотрел один из вариантов изменения цвета (background) javascript внутри тега...
Теперь тоже самое(ну или похожее...) сделаем внутри скрипта...
Нам опять нужен элемент... + id
Обратимся к элементу через id
Стили для блока выделим в отдельный тег style
<style>
#change_background{width:500px;height:100px;background:yellow}
</style>
Далее скрипт изменения цвета (background) javascript скриптом
Используем один из способов onclick
Нам понадобится getElementById для получения объекта.
Ну и далее простое условие с проверкой, что внутри атрибута style , если цвет красный
, то меняем его на #efefef
Во всех други случаях, т.е. иначе(else) меняем на красный...
Скрипт javascript для замены background при нажатии
Не забываем... если не сделано onload, то скрипт должен находиться под выше приведенным кодом элемента, в котором собираемся изменить background при нажатии
<script>
document.addEventListener("click", function(e)
{
if_id = e . target. id;
if(if_id == "change_background")
{
if_id = document.getElementById(if_id);
if(if_id .style . background == "red")
{
if_id .style . background = "#efefef";
}
else
{
if_id .style . background = "red";
}
}
});
</script>
Пример изменения background при нажатии javascript
Нам остается разместить приведенный код прямо здесь. Чтобы проверить как работает изменение background при нажатии javascript кликните по ниже идущему цветному блоку...
Изменение цвета кнопки (background) javascript
С помощью самописного скрипта, заставим кнопки менять цвет.
Алгоритм смены цвета кнопки.
У кнопки должно быть что-то одинаковое - "class" = click_me.
И что-то разное. уникальное, это id.
<button class="click_me" id="id_2">Измени цвет кнопки</button>
<button class="click_me" id="id_3">Измени цвет кнопки</button>
Возьмем один из способов onclick
Получим имена класса и ид:
Условие -если нажали по нашей кнопке с классом:
Получаем объект из имени(которое получили раннее):
При покрашенной кнопке возвращаем нажатой кнопке её цвет по умолчанию:
{
if_id .style . background = "#efefef";
}
Иначе, всем кнопкам с классом возвращаем в цикле её цвет по умолчанию и только той кнопке, по которой нажали изменяем цвет::
{
var links = document.querySelectorAll(".click_me");
links.forEach(link => {
link.setAttribute("style", "background:#efefef");
})
if_id .style . background = "red";
}
Соберем весь код смены цвета с помощью javascript
Html:
<button class="click_me" id="id_1">Измени цвет кнопки</button>
<button class="click_me" id="id_2">Измени цвет кнопки</button>
<button class="click_me" id="id_3">Измени цвет кнопки</button>
Javascript
<script>
document.addEventListener("click", function(e)
{
if_id = e . target. id;
the_class = e . target.className;
if(the_class == "click_me")
{
if_id = document.getElementById(if_id);
if(if_id .style . background == "red")
{
if_id .style . background = "#efefef";
}
else
{
var links = document.querySelectorAll(".click_me");
links.forEach(link => {
link.setAttribute("style", "background:#efefef");
})
if_id .style . background = "red";
}
}
});
</script>
