Javascript как изменить цвет кнопки - Исправление ошибок и поиск оптимальных решений проблем

Download Article

This wikiHow article will teach you how to change the button color once it’s clicked using JavaScript. Changing the button color lets users know that they have already clicked the button on your page.

Steps

1

Open your project in a Java-editing environment. This can be anything like Visual Studio or Oracle JDeveloper.
2
Enter the following code into your program to change the button’s color with onclick:
```
<script>

document.getElementById("changeGreen").onclick = function(){
	document.getElementById("output").style.color = 'green';
}

document.getElementById("changeRed").onclick = function(){
	document.getElementById("output").style.color = 'red';
}
</script>
```
- This code prompts the buttons to change the color of your text from green to red. You can replace these colors with others you prefer.^[1]
Advertisement

Enter the following code into your program if you want to change the button’s color when a text field is filled in:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<body>
   <label>
      UserName:
   </label>
   <input type="text" id="changeColorDemo" style="margin-left:10px;margin-top:10px"
      onkeyup="changeTheColorOfButtonDemo()">
   <br><br>
   <button id="buttonDemo" style="background:skyblue;margin-left:10px;">Press Me</button>
</body>
<script>
   function changeTheColorOfButtonDemo() {
      if (document.getElementById("changeColorDemo").value !== "") {
         document.getElementById("buttonDemo").style.background = "green";
      } else {
         document.getElementById("buttonDemo").style.background = "skyblue";
      }
   }
</script>
</html>

Using an <IF/ELSE> statement, the button is skyblue until the input field is filled, then it changes to a green button.

If you want to change the colors, you can either use color names like «Green» or «Skyblue,» Hexadecimal numbers (which you can find by searching Hexadecimal colors), or RGB colors (which you can also find by a simple internet search). To change the colors in the code, replace the «green» and «skyblue» colors in the code style.background.

Ask a Question

200 characters left

Include your email address to get a message when this question is answered.

Submit

Thanks for submitting a tip for review!

References

About This Article

Article SummaryX

1. Open your project in a Java-editing environment.

2. Enter the following code into your program to change the button’s color with «onclick.»
3. Enter the following code into your program if you want to change the button’s color when a text field is filled in.

Did this summary help you?

Thanks to all authors for creating a page that has been read 16,601 times.

Is this article up to date?

Источник

Download Article

Steps

1

Open your project in a Java-editing environment. This can be anything like Visual Studio or Oracle JDeveloper.
2
Enter the following code into your program to change the button’s color with onclick:
```
<script>

document.getElementById("changeGreen").onclick = function(){
	document.getElementById("output").style.color = 'green';
}

document.getElementById("changeRed").onclick = function(){
	document.getElementById("output").style.color = 'red';
}
</script>
```
- This code prompts the buttons to change the color of your text from green to red. You can replace these colors with others you prefer.^[1]
Advertisement

Enter the following code into your program if you want to change the button’s color when a text field is filled in:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<body>
   <label>
      UserName:
   </label>
   <input type="text" id="changeColorDemo" style="margin-left:10px;margin-top:10px"
      onkeyup="changeTheColorOfButtonDemo()">
   <br><br>
   <button id="buttonDemo" style="background:skyblue;margin-left:10px;">Press Me</button>
</body>
<script>
   function changeTheColorOfButtonDemo() {
      if (document.getElementById("changeColorDemo").value !== "") {
         document.getElementById("buttonDemo").style.background = "green";
      } else {
         document.getElementById("buttonDemo").style.background = "skyblue";
      }
   }
</script>
</html>

Using an <IF/ELSE> statement, the button is skyblue until the input field is filled, then it changes to a green button.

If you want to change the colors, you can either use color names like «Green» or «Skyblue,» Hexadecimal numbers (which you can find by searching Hexadecimal colors), or RGB colors (which you can also find by a simple internet search). To change the colors in the code, replace the «green» and «skyblue» colors in the code style.background.

Ask a Question

200 characters left

Include your email address to get a message when this question is answered.

Submit

Thanks for submitting a tip for review!

References

About This Article

Article SummaryX

Did this summary help you?

Thanks to all authors for creating a page that has been read 16,601 times.

Is this article up to date?

Источник

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

Сменить цвет(background) при наведении мышки javascript

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

Html + Css

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

добавим style

+ width

+ height

+ background color

+ id

и получим:

javascript

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

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

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

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

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

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

В этом пункте разберем замену background цвета по клику с расположением js кода внутри тега.

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

Пусть это будет элемент DOM div,

добавим style

+ width

+ height

+ background color

добавим onclick

и this,

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

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

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

Изменение цвета (background) javascript скриптом

Выше я уже рассмотрел один из вариантов изменения цвета (background) javascript внутри тега…

Теперь тоже самое(ну или похожее…) сделаем внутри скрипта…

Нам опять нужен элемент… + id

<div id=change_background>здесь background</div>

Обратимся к элементу через id

Стили для блока выделим в отдельный тег style

Далее скрипт изменения цвета (background) javascript скриптом

Используем один из способов onclick

Нам понадобится getElementById для получения объекта.

Ну и далее простое условие с проверкой, что внутри атрибута style , если цвет красный

if(if_id .style . background == «red»)

, то меняем его на #efefef

if_id .style . background = «#efefef»;

Во всех други случаях, т.е. иначе(else) меняем на красный…

if_id .style . background = «red»;

Скрипт 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

Изменение цвета кнопки (background) 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(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»;
}

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

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

Источник

🗓️ Обновлено: 30.01.2022

💬Комментариев:
0

👁️Просмотров: 6984

Поменяем цвет фона и текста у кнопки при наведении.

Будем использовать два способа. Первый — просто меняем фон и цвет у кнопки. Второй — меняем фон кнопки с помощью псевдоэлемента :before

Кнопка внутри формы (button type=»submit»)

Просто меняем фон и цвет:

See the Pen
#1 Просто меняем фон и цвет кнопки — button type=»submit» by Pelegrin (@pelegrin2puk)
on CodePen.

Меняем через псевдоэлемент :before (обратите внимание на span, который нужно разместить внутри кнопки):

See the Pen
Меняем фон с помощью :before — button type=»submit» by Pelegrin (@pelegrin2puk)
on CodePen.

Кнопка внутри формы (input type=»submit»):

Тот же самый принцип, что и выше, но вместо button[type=»submit»] нужно в css прописать input[type=»submit»]

Кнопка, как отдельный элемент в html кода:

Просто меняем фон и цвет:

See the Pen
Изменить цвет кнопки — обычный div by Pelegrin (@pelegrin2puk)
on CodePen.

А теперь меняем цвет, с помощью псевдоэлемента :before

See the Pen
Изменить цвет кнопки с помощью :before — обычный div by Pelegrin (@pelegrin2puk)
on CodePen.

Кнопка в Bootstrap

Чтобы изменить цвет кнопки в Bootstrap, вам необходимо найти нужный класс (или id), а также нужный порядок вложенности элементов.

К примеру, у вас есть кнопка

<button type="button" class="btn btn-outline-primary">Primary</button>

И вы хотите изменить для нее цвет при наведении. Тогда я бы рекомендовал в css прописать следующее:

.btn.btn-outline-primary:hover {
  background: red; /* Либо любой другой цвет */
  /* А также заменил бы цвет и для border */
}

Как изменить цвет кнопки с помощью Js

Я покажу два варианта, как поменять цвет кнопки при наведении используя JavaScript.

Первый вариант — мы будем добавлять класс с нашей кнопки через js:

See the Pen
YzWmEGX by Pelegrin (@pelegrin2puk)
on CodePen.

Второй вариант — мы будем менять css стили прямо в js:

See the Pen
#2 Меняем цвет кнопки c помощью JS — меняем стили внутри JavaScript by Pelegrin (@pelegrin2puk)
on CodePen.

Надеюсь, я помог вам разобраться, как можно изменить цвет кнопки при наведении на нее курсором. В заключении рекомендую посмотреть видео, чтобы окончательно развеять все вопросы.

Источник

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

Описание: Очень простой и часто используемый скрипт. Очень простой скрипт, который способен реализовать любой, кто занимается созданием сайтов на JavaScript. Но чтобы не тратить на это время, можете воспользоваться уже готовым.

Результат работы:

Наведите мышкой на кнопку.

Код javascript (вставлять между тегами <head> и </head>):

<script language="javascript"> var default_color; function mouseIn() { default_color = document.changecolorbutton.but.style.background; document.changecolorbutton.but.style.background = "red"; } function mouseOut() { document.changecolorbutton.but.style.background = default_color; } </script>

Код HTML (вставлять между тегами <body> и </body>):

<form name = "changecolorbutton"> <input type="button" name="but" value="Click me!!!" onMouseOver="mouseIn()" onMouseOut="mouseOut()"> </form>

C уважением, Михаил Русаков и сайт http://myrusakov.ru.

Создано 20.04.2010 19:10:41
Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Кнопка:

Она выглядит вот так:
Текстовая ссылка:

Она выглядит вот так: Как создать свой сайт
BB-код ссылки для форумов (например, можете поставить её в подписи):

Источник

Товарищ Саахов

0 / 0 / 0

Регистрация: 04.10.2011

Сообщений: 32

изменение цвета кнопок

30.12.2012, 18:56. Показов 24572. Ответов 8

Метки нет (Все метки)

Привет всем!
Помогите разобраться. У меня есть например 4 кнопки с определенным цветом:

HTML5

<input type="button"  id=b1 style="background: #fc0707;" value="Кнопка1">
<input type="button"  id=b2 style="background: #F6F6f6;" value="Кнопка2">
<input type="button"  id=b3 style="background: #F6F6f6;" value="Кнопка3">
<input type="button"  id=b4 style="background: #F6F6f6;" value="Кнопка4">

изначально одна из них отличается по цвету.
что хочу?
Хочу что бы при нажатии на кнопку 3 например, кнопка 1 становилась #F6F6f6, а кнопка 3 #fc0707.

как я это понимаю (но это не работает):

Javascript

1 2	document.getElementById('b2').style.backgroundColor.onclick = '#fc0707' document.getElementById('b1').style.backgroundColor = '#F6F6f6'

и все это засунуть в конструкцию if/elseif ?

возможно вопрос и «нубский», но я только учусь.

__________________
Помощь в написании контрольных, курсовых и дипломных работ, диссертаций здесь

Programming Эксперт 94731 / 64177 / 26122 Регистрация: 12.04.2006 Сообщений: 116,782	30.12.2012, 18:56
8

Mysterious Light

4163 / 2066 / 424

Регистрация: 19.07.2009

Сообщений: 3,125

Записей в блоге: 24

30.12.2012, 19:07

Если я правильно понял задачу, то так:

HTML5

<script>
function btnclick() {
    activebtn.style.backgroundColor = disactiveclr;
    (activebtn = this).style.backgroundColor = activeclr;
}
var disactiveclr = "#F6F6f6";
var activeclr = "#fc0707";
var activebtn = null;
function ld(){
    activebtn = document.getElementById("b1");
    for(var i=1; i<5; ++i) document.getElementById("b"+i).onclick=btnclick;
    alert("ready");
}
</script>
<body onload="ld();">
<input type="button"  id=b1 style="background: #fc0707;" value="Кнопка1">
<input type="button"  id=b2 style="background: #F6F6f6;" value="Кнопка2">
<input type="button"  id=b3 style="background: #F6F6f6;" value="Кнопка3">
<input type="button"  id=b4 style="background: #F6F6f6;" value="Кнопка4">
</body>

0 / 0 / 0

Регистрация: 04.10.2011

Сообщений: 32

30.12.2012, 20:04

[ТС]

спасибо за ответ, но немного не так. у вас получается кнопка окрашивается в другой цвет, при нажатии на нее.
а хотелось бы так:
1. с самого начала одна из кнопок красная — первая
2. я нажимаю на нее она меняет свой цвет на серый, но красной становится кнопка 3
4. я нажимаю кнопку 3 она меняет свой цвет на серый, но красной становится кнопка 4
5. я нажимаю кнопку 4 она меняет свой цвет на серый, но красной становится кнопка 1

вот как то так.

Добавлено через 32 минуты
получается сценарий на 4 действия

4163 / 2066 / 424

Регистрация: 19.07.2009

Сообщений: 3,125

Записей в блоге: 24

30.12.2012, 20:34

То есть нажатии на окрашенную кнопку она должна стать серой, а какая то другая должна окраситься в красный, так? Какая именно: случайно-выбранная или правая/левая? При нажатии на серую кнопку ничего не должно меняться?

0 / 0 / 0

Регистрация: 04.10.2011

Сообщений: 32

30.12.2012, 20:53

[ТС]

Сообщение от Mysterious Light

То есть нажатии на окрашенную кнопку она должна стать серой, а какая то другая должна окраситься в красный, так?

да именно.

Сообщение от Mysterious Light

Какая именно: случайно-выбранная или правая/левая?

скажем по сценарию в предыдущем моем посте. жмем 1 меняется 3
3->4
4->1

Сообщение от Mysterious Light

При нажатии на серую кнопку ничего не должно меняться?

нет цвета меняются должны только при нажатии на красную кнопку.

Mysterious Light

4163 / 2066 / 424

Регистрация: 19.07.2009

Сообщений: 3,125

Записей в блоге: 24

30.12.2012, 21:04

Тогда так:

Javascript

function nextBtn(btn) {
    var n = btn.id;
    n = n=="b1" ? "b3" : (n=="b3" ? "b4" : "b1");
    return document.getElementById(n);
}
function btnclick() {
    activebtn.style.backgroundColor = disactiveclr;
    activebtn.onclick = null;
    activebtn = nextBtn(activebtn);
    activebtn.style.backgroundColor = activeclr;
    activebtn.onclick = btnclick;
}
var disactiveclr = "#F6F6f6";
var activeclr = "#fc0707";
var activebtn = null;
function ld(){
    (activebtn = document.getElementById("b1")).onclick=btnclick;
}

0 / 0 / 0

Регистрация: 04.10.2011

Сообщений: 32

30.12.2012, 21:48

[ТС]

да спасибо! все работает!
а тут еще такой нюанс, не могли бы вы рассказать как функция nextBtn работает?(что бы не просто код скопипастить)

Mysterious Light

4163 / 2066 / 424

Регистрация: 19.07.2009

Сообщений: 3,125

Записей в блоге: 24

30.12.2012, 22:13

Javascript

function nextBtn(btn) {
    // определяем id нажатой (активной) кнопки
    var n = btn.id;
    // определяем id следующей кнопки по правилу
    // b1 -> b3
    // b3 -> b4
    // остальное -> b1
    n = (n=="b1" ? "b3" : (n=="b3" ? "b4" : "b1"));
    // возвращаем новую активную кнопку
    return document.getElementById(n);
}

Можно так:

Javascript

function nextBtn(btn) {
    // определяем id нажатой (активной) кнопки
    var n;
    // определяем id следующей кнопки по правилу
    // b1 -> b3
    // b3 -> b4
    // остальное -> b1
    if(btn.id=="b1") n = "b3";
    else
        if(btn.id == "b3") n = "b4";
        else n = "b1";
    // возвращаем новую активную кнопку
    return document.getElementById(n);
}

11 / 11 / 2

Регистрация: 19.12.2012

Сообщений: 177

02.01.2013, 12:06

Почти тоже самое было необходимо и мне. Если поможет, обсуждения в этой теме:
Выделить активный пункт меню

IT_Exp Эксперт 87844 / 49110 / 22898 Регистрация: 17.06.2006 Сообщений: 92,604	02.01.2013, 12:06
9

Источник