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

Question

Как я могу изменить весь цвет с помощью 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

добавлено 28 Декабрь 2012 в 10:11 автор E-ebola virus отредактировано 28 Декабрь 2012 в 10:19

Просмотры: 3

источник

nl ja de

Что вы пробовали до сих пор?

добавлено 28 Декабрь 2012 в 10:14, автор Hkachhia, источник

4 ответы

Видеокурс "Создание приложений для Android"

Получи множество видеоуроков по Android сейчас

Видеокурс по Java для начинающих

Получи видеокурс по Java для начинающих с упражнениями

Мини-курс по Angular и NgRx

16 видео-уроков

Система управления ссылками ReDirector 3.0

Автор: Евгений Попов

автор Samich · Answer 1 · 2012-12-28T10:14Z

Лучшее решение здесь - определить 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');

автор Mateusz Rogulski · Answer 2 · 2012-12-28T10:16Z

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

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

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

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

$("#yourButton").click(function() {
    $("body").toggleClass("secondTheme");
});

автор Polmonite · Answer 3 · 2012-12-28T10:24Z

Если вы можете переключаться между классами, я думаю, что это будет лучше; если вы не можете/не хотите, вы можете использовать функцию .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.

автор mr_lewjam · Answer 4 · 2012-12-28T10:16Z

правильным способом сделать это было бы присвоение класса 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');