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

@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, не берите в голову

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

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

Решение

Решение

@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