Всех друзей поздравляем с Новым годом! Всего вам самого наилучшего! Всех благ, здоровья а материальное приложится!
СКРИПТЫ alt htmlcssphpjsblog

Менять цвет при наведении при клике javascript

Поддержи проект!!! smile

Смена цвета через js - мы можем поменять цвет, либо при наведении, либо при клике(onclick). разберем несколько способов менять цвет с помощью javascript.

Заменить цвет у элемента с помощью javascript

  1. Сменить цвет при наведении мышки javascript
  2. Изменить цвет нажав по элементу.
  3. Изменение цвета кнопки javascript

  1. Сменить цвет при наведении мышки javascript

    Для того, чтобы сделать сменяемость цвета с помощью javascript, при наведении мышки...Нам понадобится:

    Html + Css

    Нам понадобится элемент DOM div,

    добавим style

    + width

    + height

    + background color

    + id

    и получим:

    <div style="width:500px;height:100px;background:yellow" id="example"></div>
    javascript

    Нам понадобится: script

    + onmouseover - когда мышка будет попадать на элемент,

    И когда мышка будет покидать элемент - onmouseleave и внутри функций, в зависимости от действия будем изменять цвет, или возвращать первоначальный:

    <script>
    example.onmouseover = function() {
    example.style.background= "red";
    };

    example.onmouseleave = function() {
    example.style.background= "yellow";
    };
    </script>

    Результат замены цвета при наведении мышки на элемент:


  2. Изменить цвет нажав по элементу.

    Для того, чтобы изменить цвет элемента нажав по нему, нам понадобится, как и в выше проведенном пункте: элемент DOM div,

    добавим style

    + width

    + height

    + background color

    добавим onclick

    и this,

    Соберем это все в одн целое:

    <div style="width:500px;height:100px;background:yellow" onclick="this.style.background='red'"></div>

    Результат замены цвета при наведении мышки на элемент:

    Для того, чтобы увидеть изменение цвета элемента при нажатии на него нажмите по блоку!


  3. Изменение цвета кнопки javascript

    С помощью самописного скрипта, заставим кнопки менять цвет.

    Алгоритм смены цвета кнопки.

    У кнопки должно быть что-то одинаковое - "class" = click_me.

    И что-то разное. уникальное, это id.

    Пример кнопок:
    <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

    Возьмем один из способов onclick

    document.addEventListener("click", function(thenew)

    Получим имена класса и ид:

    if_id = thenew . target. id;
    the_class = thenew . 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";
    }

    Соберем весь код смены цвета с помощью 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(thenew)

    {

      if_id = thenew . target. id;

      the_class = thenew . 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>

    Результат изменения цвета при нажатии на элемент


Последняя дата редактирования : 26.04.2021 11:36
//dwweb.ru/comments_1_5/include/img/hand_no_foto.png
no
no
Еще никто не прокомментировал! COMMENTS+   BBcode
аватар
🞨
Загрузить свой аватар
(max ширина, высота = 200px)

Подписаться + =
Теги:
change color js Смена цвета через js Менять цвет при наведении при клике javascript

Счетчик в график :

Построение гравиков
Основа для графика : счетчик посещаемости.
Последние комментарии :
Марат :
12/06/2021 10:04
Рад, что понравилось!Приходите ещё!
подробнее.
Марат :
12/06/2021 10:03
Есть наглядное редактирование на самой странице - где есть? достаточно дописать в адресной строке что-то -…
подробнее.
Знаток :
11/06/2021 11:37
Есть наглядяное редактирование на самой странице (типа в реальном временем)- достаточно дописать в адресной…
подробнее.
Сергей :
09/06/2021 05:20
Спасибо за статью. Отличная работа!
подробнее.
Марат :
19/05/2021 12:38
Справа есть соц сети.... напишите личное сообщение...На главной(пункт №5) они также…
подробнее.