СКРИПТЫ alt phpjshtmlcssblog
ТЕГИ:
php (267)
js (136)
html (132)
css (98)
html tags (58)
edit text (37)
jquery (36)
form html (29)
php array (28)
foto (23)
fonts (22)
forum (19)
atom (18)
html book (17)
board (17)
Показать еще :
js method (16)
svg (16)
hosting (15)
php file (15)
color (14)
osclass (13)
htaccess (13)
ruweb.net (13)
table (12)
path (12)
icon (11)
php date (11)
online (11)
info (11)
js delete (11)
notepad (11)
yandex (11)
input (11)
php img (10)
url (10)
jsphp (10)
form (8)
cookie (7)
task (7)
php url (7)
comment (7)
ftp (6)
click (6)
js url (6)
value (5)
reg.ru (5)
mb (5)
adminka (5)
js id (4)
select (4)
search (4)
bbcode (4)
js copy (4)
js form (4)
iframe (3)
js time (3)
vs code (3)
captcha (3)
vk (3)
ukoz (2)
browser (2)
dosite (2)
seo (2)
tag hr (2)
js post (2)
sitemap (2)
console (2)
header (1)
domen (1)
smile (1)
ssl (1)
books (1)
numbers (1)
archive (1)

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

05.03.2021 Марат 1942 0 js |
Смена цвета через 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>

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

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

Сообщение системы комментирования :

01.09.2021

Форма пока доступна только админу... скоро все заработает...надеюсь...

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

Построение гравиков
Основа для графика : счетчик посещаемости.
Последние комментарии :
Марат :
17.10.2021 39:28
Давно не делал и страницу и видео в один день... чет, как-то выжитый как…
подробнее.
Марат :
10.10.2021 17:20
Добавлен новый смайл
подробнее.
Марат :
05.10.2021 26:37
Страница sitemap.html восстановлена. Но будут вводиться только страницы…
подробнее.
Марат :
04.10.2021 38:22
Добавил несколько вариантов поставить смайл на страницу своего сайта! 3 варианта! Кроме варианта скачать…
подробнее.
Марат :
17.09.2021 28:02
Установка Яндекс поиск на сайт! Контент обновлен на 100%. Такое ощущение, что старый текст не я…
подробнее.
Марат :
07.09.2021 23:21
Частенько приходится исправлять ошибки и вот...как-то я обратил внимание на надпись: "нажми ctrl enter" на сайте и…
подробнее.