Фиксация цвета кнопок

@skolm · Регистрация: 01.02.2013

Студворк — интернет-сервис помощи студентам

Здравствуйте.

Есть 10 кнопок.
Текущее оформление кнопок следующее:
- Каждая кнопка имеет border - разных цветов. Фон кнопок белый. Цвет шрифта на всех кнопках = цвет border.
- При наведении на кнопку, ее цвет меняется. Фон становится таким же цветом как border, а текст меняется на белый
- После нажатия по любой кнопке, происходит 4 секундная анимация.

Как сделать, что бы:
После первого нажатия - цвет кнопки фиксировался, цвет border'а и цвет шрифта фиксировались.
После второго нажатия - цвет кнопки, цвет border'a и цвет шрифта становились по умолчанию.

Используется bootstrap, поэтому кнопки выглядят вот так:

HTML5
1
2
3
4
<button type="button" class="btn btn-primary">Кнопка1</button>
<button type="button" class="btn btn-primary">Кнопка2</button>
<button type="button" class="btn btn-primary">Кнопка3</button>
<button type="button" class="btn btn-primary">Кнопка4</button>

P.S. Все кнопки могут иметь разные цвета.

@arcmag · 05.01.2016, 20:43

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
    function fHover (selector) {
        var e = typeof selector === "string" ? document.querySelector (selector) : selector,
            def = {background: getComputedStyle (e)["background"], color: getComputedStyle (e)["color"]},
            css = function (e, s) {for (var i in s) e.style[i] = s[i];},
            over = function () {
                css (e, {background: getComputedStyle (e)["borderColor"], color: "white"});
            },
            out = function () {
                css (e, def);
            }
        e.addEventListener ("mouseover", over);
        e.addEventListener ("mouseout", out);
    }
 
    window.addEventListener ("load", function () {
        [].forEach.call(document.querySelectorAll (".btn.btn-primary"), function (e) {
            fHover (e);
        })
    })

HTML5
1
2
3
4
    <button style="border: solid 1px red" type="button" class="btn btn-primary">Кнопка1</button>
    <button style="border: solid 1px green" type="button" class="btn btn-primary">Кнопка2</button>
    <button style="border: solid 1px blue" type="button" class="btn btn-primary">Кнопка3</button>
    <button style="border: solid 1px orange" type="button" class="btn btn-primary">Кнопка4</button>

@skolm · 05.01.2016, 21:17 **[ТС]**

Не работает.

@arcmag · 05.01.2016, 21:50

хз у меня работает...

@Padimanskas · 05.01.2016, 22:31

skolm, *.classList.toggle(...)
https://jsfiddle.net/pbaqkn77/

JavaScript
1
2
3
4
document.documentElement.onclick = function(e){
    if(e.target.tagName !== 'BUTTON') return false;
  e.target.classList.toggle('changed');
};

@skolm · 05.01.2016, 22:56 **[ТС]**

Сообщение от Padimanskas

skolm, *.classList.toggle(...)

Спасибо.

Но таких кнопок несколько и у каждой своей оформление. Как этот код дополнить?

@kalabuni · 05.01.2016, 22:59

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<style>
.btn {background-color: white}
</style>
 
<script>
onload = function ()
{
function Mout ()
   {
   this.style.backgroundColor = 'white';
   this.style.color = this.currentStyle ? this.currentStyle.borderTopColor
                    : getComputedStyle (this, null).getPropertyValue ('border-top-color');
   }
for (var B = document.querySelectorAll ('.btn.btn-primary'), j = 0, J = B.length; j < J; j++)
with (B [j]) onmouseover = function ()
                           {
                           this.style.backgroundColor = this.currentStyle ? this.currentStyle.borderTopColor
                                                      : getComputedStyle (this, null).getPropertyValue ('border-top-color');
                           this.style.color = 'white';
                           },
             onmouseout = Mout,
             onclick = function () {this.onmouseout = this.onmouseout ? '' : Mout; this.blur ()}
}
</script>
 
    <button type="button" class="btn btn-primary" style="border: solid 1px red;    color: red"   >Кнопка 1</button>
    <button type="button" class="btn btn-primary" style="border: solid 1px green;  color: green" >Кнопка 2</button>
    <button type="button" class="btn btn-primary" style="border: solid 1px blue;   color: blue"  >Кнопка 3</button>
    <button type="button" class="btn btn-primary" style="border: solid 1px orange; color: orange">Кнопка 4</button>

@Padimanskas · 05.01.2016, 23:28

Сообщение от skolm

Как этот код дополнить?

можно дописать нужные классы

@skolm · 05.01.2016, 23:53 **[ТС]**

Сообщение от Padimanskas

можно дописать нужные классы

Как же, если в е.target попадает тип кнопки а не конкретный класс или id.

Добавлено через 4 минуты

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<style>
.btn {background-color: white}
</style>
 
<script>
onload = function ()
{
function Mout ()
   {
   this.style.backgroundColor = 'white';
   this.style.color = this.currentStyle ? this.currentStyle.borderTopColor
                    : getComputedStyle (this, null).getPropertyValue ('border-top-color');
   }
for (var B = document.querySelectorAll ('.btn.btn-primary'), j = 0, J = B.length; j < J; j++)
with (B [j]) onmouseover = function ()
                           {
                           this.style.backgroundColor = this.currentStyle ? this.currentStyle.borderTopColor
                                                      : getComputedStyle (this, null).getPropertyValue ('border-top-color');
                           this.style.color = 'white';
                           },
             onmouseout = Mout,
             onclick = function () {this.onmouseout = this.onmouseout ? '' : Mout; this.blur ()}
}
</script>
 
    <button type="button" class="btn btn-primary" style="border: solid 1px red;    color: red"   >Кнопка 1</button>
    <button type="button" class="btn btn-primary" style="border: solid 1px green;  color: green" >Кнопка 2</button>
    <button type="button" class="btn btn-primary" style="border: solid 1px blue;   color: blue"  >Кнопка 3</button>
    <button type="button" class="btn btn-primary" style="border: solid 1px orange; color: orange">Кнопка 4</button>

Да, спасибо, почти что надо, а как сделать еще здесь таймер, чтобы нельзя было сменить стиль кнопки, пока не истечет 2 секунды? Просто у меня тут анимация и пока она происходит нужно чтобы цвет нельзя было сменить.

@kalabuni · 06.01.2016, 00:02

Сообщение от skolm

почти что надо

не понял, почему "почти"?
какое именно из заданных вами в первом сообщении условий не исполнено?

Сообщение от skolm

как сделать еще здесь таймер, чтобы нельзя было сменить стиль кнопки, пока не истечет 2 секунды? Просто у меня тут анимация и пока она происходит нужно чтобы цвет нельзя было сменить.

обрабатываются три события -- наведение, отведение и клик
при всех трёх событиях происходит изменение правил стиля
уточните -- перед каким именно событием (наведение, отведение или клик) требуется тайм-аут в 2 секунды?
и с какого момента начинать отсчитывать 2 секунды?

@skolm · 06.01.2016, 00:30 **[ТС]**

Сообщение от kalabuni

не понял, почему "почти"?
какое именно из заданных вами в первом сообщении условий не исполнено?

Работает всё прекрасно, просто вот как раз таймер еще нужен.

Сообщение от kalabuni

обрабатываются три события -- наведение, отведение и клик
при всех трёх событиях происходит изменение правил стиля
уточните -- перед каким именно событием (наведение, отведение или клик) требуется тайм-аут в 2 секунды?
и с какого момента начинать отсчитывать 2 секунды?

После кликов - таймаут 2 или 1 секунды (кнопка не может сменить цвет).

@kalabuni · 06.01.2016, 01:24

Сообщение от skolm

После кликов - таймаут 2 или 1 секунды (кнопка не может сменить цвет).

требуется уточнение
положим, кликнули на кнопку 1 и она "зафиксировалась" (стала красной с белым текстом и перестала реагировать на наведение/отведение курсора)
вопрос: в течении двух секунд нельзя возвращать к дефолтному стилю именно и только эту Кнопку 1?
а по другим кнопкам - (по второй, по третьей, по -дцатой) в эти две секунды кликать для их "фиксации" (или для возврата их к дефолту) можно?

@skolm · 06.01.2016, 01:31 **[ТС]**

Сообщение от kalabuni

требуется уточнение
положим, кликнули на кнопку 1 и она "зафиксировалась" (стала красной с белым текстом и перестала реагировать на наведение/отведение курсора)
вопрос: в течении двух секунд нельзя возвращать к дефолтному стилю именно и только эту Кнопку 1?
а по другим кнопкам - (по второй, по третьей, по -дцатой) в эти две секунды кликать для их "фиксации" (или для возврата их к дефолту) можно?

Только 1 кнопку. Остальные можно кликать, но на них тоже паузу.

@kalabuni · 06.01.2016, 01:52

строку #22 моего кода onclick = function () {this.onmouseout = this.onmouseout ? '' : Mout; this.blur ()} замените на следующие шесть строчек

JavaScript
1
2
3
4
5
6
             onclick = function ()
                       {
                       if (this.onmouseout && !this.getAttribute ('tmr')) this.onmouseout = '', this.setAttribute ('tmr', +new Date);
                       else if (this.getAttribute ('tmr') && (+new Date - this.getAttribute ('tmr') > 2000)) onmouseout = Mout, this.setAttribute ('tmr', '');
                       this.blur ();
                       }

@skolm · 06.01.2016, 02:13 **[ТС]**

Сообщение от kalabuni

строку #22 моего кода onclick = function () {this.onmouseout = this.onmouseout ? '' : Mout; this.blur ()} замените на следующие шесть строчек

Все работает прекрасно, огромное спасибо за потраченное время)

@Padimanskas · 06.01.2016, 02:35

Сообщение от skolm

Как же, если в е.target попадает тип кнопки а не конкретный класс или id.

В e.target находится элемент на котором инициировано событие, из этого элемента можно получить все необходимое для обхода и мутаций dom. Нужно всего лишь включить mdn и немного воображения.

@skolm · 06.01.2016, 03:03 **[ТС]**

Сообщение от Padimanskas

В e.target находится элемент на котором инициировано событие, из этого элемента можно получить все необходимое для обхода и мутаций dom. Нужно всего лишь включить mdn и немного воображения. Но я уже вижу следующую тему под названием "помогите с кодом", а внутри этот волосатый комок, который муссируется выше

Да, в е таргет прилетает тип button, но однозначной инициализации то нет, верно? Т.е. я конкретно в таргете не знаю, какая именно нажата кнопка, а не зная этого невозможно однозначно изменить параметры стилей на нужные. Тоже самое будет относится к прочим кнопкам, которые модифицировать не надо, т.е. я буду при нажатии на кнопку типа буттон пытаться изменить её стиль.

@kalabuni · 06.01.2016, 04:40

Сообщение от skolm

в е таргет прилетает тип button, но однозначной инициализации то нет, верно?

во-первых, походу вы перепутали инициализацию с идентификацией

во-вторых, вы неправы -- в e.target "прилетает" ссылка на сам HTML-элемент, на котором произошло событие,
т.е. кнопка, на которую нажали -- она однозначно идентифицируется через этот самый e.target
e.target в коде вашего оппонента равносилен this в моём коде

мой код таки работает, решая все поставленные задачи, а вот для работы кода Вашего оппонента нужно дополнительно "включить mdn и немного воображения"

есть люди, которые полагают, что написать в коде window.addEventListener ("load", function () {} - это весьма круто
а вот равносильное для данной задачи onload = function () {} -- это, по их мнению, совсем несолидно

но это по молодости, с возрастом обычно проходит

так что... бывает... skolm, не берите в голову

Новые блоги и статьи Все статьи Все блоги /
Уведомление о неверно выбранном значении справочника Maks 06.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "НарядПутевка", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если в документе выбран неверный склад. . .	Установка Qt Creator для C и C++: ставим среду, CMake и MinGW без фреймворка Qt 8Observer8 05.04.2026 Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https:/ / github. com/ qt-creator/ qt-creator, где можно скачать установщик, на вкладке Releases:. . .	AkelPad-скрипты, структуры, и немного лирики.. testuser2 05.04.2026 Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .	Отображение реквизитов в документе по условию и контроль их заполнения Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеСпецтехники", разработанного в конфигурации КА2. Данный документ берёт данные из другого нетипового документа. . .
Фото всей Земли с борта корабля Orion миссии Artemis II kumehtar 04.04.2026 Это первое подобное фото сделанное человеком за 50 лет. Снимок называют новым вариантом легендарной фотографии «The Blue Marble» 1972 года, сделанной с борта корабля «Аполлон-17». Новое фото. . .	Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .	Программный контроль заполнения реквизитов табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: 1. Реализовать контроль заполнения реквизита. . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/

@skolm 19 / 18 / 5 Регистрация: 01.02.2013 Сообщений: 171
	05.01.2016, 21:17 [ТС]
	Не работает. 0

@arcmag 347 / 322 / 203 Регистрация: 27.06.2014 Сообщений: 762
	05.01.2016, 21:50
	хз у меня работает... 0

Фиксация цвета кнопок

Решение

Решение