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

@АИЕ · Регистрация: 28.09.2015

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

Добрый день

Подскажите, есть кнопка:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#button7
{
position: fixed;
right: 460px;
bottom: 160px;
background-color: #C03DC1;
border: none;
color: white;
z-index: 2;
padding: 15px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
}

JavaScript
1
$("<input type='button' id='button7' value='НЕТ' />").appendTo("body");

Как поменять ей цвет используя js во время исполнения кода?

Подобное ошибок не выдает, но и цвет не меняет:

JavaScript
1
2
3
button7.style.backgroundColor="green";
// или подобное
document.getElementById("button7").style.backgroundColor = "#F6F6f6";

@Mr_Sergo · 11.08.2019, 10:19

АИЕ,

Что-то вы не так делаете, ваш код работает -> https://codepen.io/Mr_Sergo/pen/wVYpNR

@АИЕ · 11.08.2019, 10:27 **[ТС]**

Я использую User JavaScript and CSS v 1.2.6
В CSS описана кнопка как выше, в разделе JS добавлена кнопка в тело как описано выше
Код исполняется на нужном сайте, имеется такой код:

JavaScript
1
if (avto == 1) {button7.value = "ДА"; button7.style.backgroundColor="green";} else button7.value = "НЕТ";

value меняется, а цвет нет

@Mr_Sergo · 11.08.2019, 14:16

Сообщение от АИЕ

Код исполняется на нужном сайте

Сцылочку на сайт киньте я сам попробую

@АИЕ · 11.08.2019, 14:18 **[ТС]**

Сайт не мой, сторонний
А кнопка моя созданная в расширении Гугл о котом выше указал

@Mr_Sergo · 11.08.2019, 14:24

Сообщение от АИЕ

Сайт не мой, сторонний

И у него нету ссылки в интернете? Как вы на него тогда попадаете?

Добавлено через 4 минуты
АИЕ, Ну и можете попробовать какое-нибудь другое расширение, например, tampermonkey- сам пользуюсь, нареканий нет.

@АИЕ · 12.08.2019, 10:37 **[ТС]**

Mr_Sergo, ответ промаргал вчера )
Вот скрины даже используя на этом форуме.
Но при нажатии цвет с красного на зеленый не меняется

@Mr_Sergo · 12.08.2019, 12:31

АИЕ,

Установил себе User JavaScript and CSS v 1.2.6 - у меня все работает

Попробуйте отключить кеш. В хроме это делается так

После проделанного на скрине у вас кеш будет отключаться пока открыт Диспетчер кода. После этого попробуйте снова тот скрипт что вы привели в шапке темы - не забудьте что страницу нужно загружать с открытым диспетчером кода.

@АИЕ · 12.08.2019, 15:14 **[ТС]**

Блин, не понимаю, отключил кэш, devtools не закрывал, обновил страницу, нажимаю на кнопку и снова ноль реакции...

Добавлено через 7 минут
Вооо... в общем методом тыка... убрал с css background-color: #FF0000; кнопка изначально стала серая, но при этом после нажатия стала менять цвет... не понимаю почему так... как выход вижу только объявить каждой нужный кнопки начальный бэкколор по коду js, а так похоже что css постоянно подставляет свой фон кнопки, но не понятно почему так у меня

@Mr_Sergo · 12.08.2019, 16:55

Сообщение от АИЕ

но не понятно почему так у меня

Мистика

Новые блоги и статьи Все статьи Все блоги /
Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .	Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .	SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .
SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip Сканируйте QR-код на мобильном и вы увидите, что появится джойстик для управления главным героем. . . .	Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .	Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .	SDL3 для Web (WebAssembly): Сборка библиотек: SDL3, Box2D, FreeType, SDL3_ttf, SDL3_mixer и SDL3_image из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .

@Mr_Sergo 2037 / 1096 / 409 Регистрация: 29.04.2016 Сообщений: 2,625
	11.08.2019, 10:19
	АИЕ, Что-то вы не так делаете, ваш код работает -> https://codepen.io/Mr_Sergo/pen/wVYpNR 0

@АИЕ 4 / 4 / 0 Регистрация: 28.09.2015 Сообщений: 281
	11.08.2019, 14:18 [ТС]
	Сайт не мой, сторонний А кнопка моя созданная в расширении Гугл о котом выше указал 0

@АИЕ 4 / 4 / 0 Регистрация: 28.09.2015 Сообщений: 281
	12.08.2019, 10:37 [ТС]
	Mr_Sergo, ответ промаргал вчера ) Вот скрины даже используя на этом форуме. Но при нажатии цвет с красного на зеленый не меняется Миниатюры 0

@Mr_Sergo 2037 / 1096 / 409 Регистрация: 29.04.2016 Сообщений: 2,625
	12.08.2019, 12:31
	АИЕ, Установил себе User JavaScript and CSS v 1.2.6 - у меня все работает Попробуйте отключить кеш. В хроме это делается так После проделанного на скрине у вас кеш будет отключаться пока открыт Диспетчер кода. После этого попробуйте снова тот скрипт что вы привели в шапке темы - не забудьте что страницу нужно загружать с открытым диспетчером кода. 0

@АИЕ 4 / 4 / 0 Регистрация: 28.09.2015 Сообщений: 281
	12.08.2019, 15:14 [ТС]
	Блин, не понимаю, отключил кэш, devtools не закрывал, обновил страницу, нажимаю на кнопку и снова ноль реакции... Добавлено через 7 минут Вооо... в общем методом тыка... убрал с css background-color: #FF0000; кнопка изначально стала серая, но при этом после нажатия стала менять цвет... не понимаю почему так... как выход вижу только объявить каждой нужный кнопки начальный бэкколор по коду js, а так похоже что css постоянно подставляет свой фон кнопки, но не понятно почему так у меня 0