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

Менять цвет при наведении при клике 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>

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


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

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

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

Построение гравиков
Основа для графика : счетчик посещаемости.
Последние комментарии :
Марат :
08/04/2021 07:12
Сам афигеваю!
подробнее.
stream :
07/04/2021 05:56
Неплохо)
подробнее.
Марат :
24/03/2021 11:01
Да что вы!? За что обижаться то?Вы тот редкий человек, который смог написать! Вы молодец!Человек, же который не…
подробнее.
Виталий :
24/03/2021 06:05
Не стоит обижаться, люди могут не понимать что ошибка не критична. Может быть до конца не изучали…
подробнее.
Марат :
23/03/2021 02:09
Спасибо, за сообщение! В архив попал вариант, который был на тестировании и там остались некоторые…
подробнее.