Как я могу изменить весь цвет с помощью jquery?

Я хочу заменить весь цвет # 111 (цвет примера) с помощью # 222 (новый цвет) в html-файле с помощью jQuery. Я хочу сделать это, чтобы изменить тему сайта одним кликом.

Начальный css:

body{
    bg-color:#111;
    color:#111;
}
div1{
    bg-color:#111;
    color:#111;
}
.
.
.
divn{
    bg-color:#111;
    color:#111;
}

После события click:

body{
    bg-color:#222;
    color:#222;
}
div1{
    bg-color:#222;
    color:#222;
}
.
.
.
divn{
    bg-color:#222;
    color:#222;
}
0
nl ja de
Что вы пробовали до сих пор?
добавлено автор Hkachhia, источник

4 ответы

Лучшее решение здесь - определить 2 класса CSS с каскадными стилями для вложенных элементов.

body { color:#111 }
.theme1 { color: #222; }
.theme2 { color: #333; }
.theme2 a { color: #003366; }
...

Затем вы можете изменить класс CSS вашего элемента body , и все элементы на странице наследуют новые стили.

// theme1 color
<body class="theme1">
...
</body>

// theme2 color
<body class="theme2">
...
</body>

Код jquery:

$('body').addClass('theme1');
6
добавлено
я не могу этого сделать. Я хочу сделать это для плагина firefox
добавлено автор E-ebola virus, источник
хорошо спасибо @Samich
добавлено автор E-ebola virus, источник
поэтому ваш FF-плагин, вероятно, имеет некоторый родительский элемент. Измените класс CSS для этого родительского элемента таким же образом, как я описал для body
добавлено автор Samich, источник

Лучший способ изменить тему одним щелчком мыши - дать некоторый класс тегу вашего тела.

Тогда в вашем css:

body{ color: #111;}
body.secondTheme{color : #222; }

И вы можете связать изменение его для события click в jquery

$("#yourButton").click(function() {
    $("body").toggleClass("secondTheme");
});
1
добавлено

Если вы можете переключаться между классами, я думаю, что это будет лучше; если вы не можете/не хотите, вы можете использовать функцию .filter в jQuery:

$('yourselector').filter(function(){
    return $(this).css('color')=='rgb(0, 1, 17)';
}).css('color','rgb(0, 2, 34)');

Это изменит все элементы, выбранные yourselector , с цветом rgb (0, 1, 17) , чтобы цвет rgb (0, 2, 34) .

Очевидно, вы также можете сделать то же самое с другими атрибутами css.

0
добавлено

правильным способом сделать это было бы присвоение класса CSS каждому элементу html, который вы хотите изменить цвет.

HTML:

<div class="colorChange">

CSS:

.colorChange{ color:#111;}

Then you would have a button that triggers a JavaScript function, which would change the color attribute of the colorChange class, I would recommend using jQuery:

$(".colorChange").css('color', '#222');
0
добавлено
JavaScript Jobs — чат
JavaScript Jobs — чат
8 336 участник(ов)

JavaScript Jobs — чат для поиска работы и людей Правила оформления: https://teletype.in/@telegram-ru/r1WQe5F1m См. также: @mobile_jobs, @devops_jobs, @nodejs_jobs, @react_js, @angular_ru, @js_ru

JavaScript.ru
JavaScript.ru
7 932 участник(ов)

Сообщество сайта JavaScript.ru в Slack.

pro.js
pro.js
4 675 участник(ов)

Про JavaScript и NodeJS Invite: https://t.me/joinchat/Be4rsT5Rsgq30DHutjxXgA Правила: http://telegra.ph/ru-chat-rules-06-19 Вакансии только с ЗП, не чаще раза в неделю.

Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda

JavaScript — русскоговорящее сообщество
JavaScript — русскоговорящее сообщество
3 269 участник(ов)

Рекомендуем сразу отключить уведомления Правила: https://rudevs.network/ByaMH6un7 См. также: @js_noobs_ru, @nodejs_ru, @typescript_ru, @react_js, @electron_ru Вакансии и поиск работы: @javascript_jobs

JavaScript Noobs — сообщество новичков
JavaScript Noobs — сообщество новичков
2 484 участник(ов)

Чат для новичков

javascript_ru
javascript_ru
915 участник(ов)

Сообщество любителей самого популярного языка программирования в мире. Чат основан в 2009 году. Логи: https://goo.gl/9EOeM7 Поддержка бота: @chat_linker (ссылка на репу внутри) Вам будут интересны @frontend_ru и @css_ru

jsChat
jsChat
603 участник(ов)

Чат посвященный программированию на языке javaScript Перед отправкой ссылки на Ваш контент посоветуйтесь с админом Все ссылки удаляются ботом автоматически

JavaScript for Zombies Chat
JavaScript for Zombies Chat
492 участник(ов)

Чат про JavaScript для настоящих zombie! Вход строго по приглашениям! Ссылка для строгих приглашений: https://t.me/joinchat/AAMBHz3Uyr0tuZ7VaB029g

All That JS
All That JS
417 участник(ов)

JS на русском