Изменение всех стилей CSS со свойством через Jquery - PullRequest
Новая
       27

Изменение всех стилей CSS со свойством через Jquery

0 голосов
/ 28 марта 2010

На странице я включаю некоторые CSS, например: 

<style type='test/css'>
.myBox{
color:#000000;
border:#FFFFFF;
padding:4px;
}
.myBox2{
color:#000000;
border:#FFFFFF;
padding:4px;
}
</style>

Затем я хочу изменить набор свойств «color» в myBox и myBox2 в jquery, не зная действительного имени (myBox, myBox2) стиля css. Другими словами, я хочу обновить ВСЕ стили CSS на странице, где цвет = определенное значение, а затем также обновить границу, где = определенное значение.

Пример (не действительный код) может быть: 

$("all css [color:#000000]").html("#FF0000");

Как это возможно с помощью jquery?

Ответы [ 3 ]

2 голосов
/ 28 марта 2010

Возможно, вам стоит взглянуть на рефакторинг вашего HTML + CSS. Весь смысл CSS в том, чтобы «каскадировать» стили через ваш сайт. Так что было бы здорово объявить что-то вроде этого: 

body {color:#333;}

Указанное выше свойство CSS наследуется во всех элементах вашего сайта. Когда приходит время переключать стили, вы можете переопределить вышеуказанный стиль своим собственным: 

$("body").css("color", "purple");

Или, в качестве альтернативы, возможно, вы захотите взглянуть на переключатель таблиц стилей, это дает вам более точный контроль зерна вашего CSS ( пример ), эти таблицы стилей могут быть сгенерированы во время выполнения, используя язык программирования на стороне сервера (например, PHP), использующий URL-адрес, похожий на: 

/css/generate-css.php?color=purple
1 голос
/ 26 ноября 2010 
$(document).ready(function () {

    $("body").find("*").filter(function() {
        return ( $(this).css("color") == "rgb(0, 0, 0)" );
    }).css("color", "red");

});

Для лучшей производительности не используйте селектор «body», как в коде выше, вместо этого используйте конкретный селектор, который вы хотите, чтобы изменения вступили в силу в его потомках. Обход всех элементов тела и запуск функции фильтра для каждого из них очень важны для больших страниц, поэтому замените «тело» более конкретным селектором, если вы можете и / или поместите селектор в «поиск», например: $ ("# my_content"). find ("p"). filter (function () {...

Примечание: возвращаемое значение: $ (this) .css ("color") в формате rgb, поэтому используйте формат rgb, чтобы определить цвет для изменения в функции фильтра выше

1 голос
/ 28 марта 2010

Не уверен, что это будет работать для вас, так как это совершенно другой подход.

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

Например,

css 

.color1 {color:#000000;}
.color2 {color:#FFFFFF;}
.color3 {color:#FF00FF;}

Если у вас есть полный контроль над html, просто добавьте класс цвета в дополнение к классу .mybox.Если вы не можете сделать это, что-то вроде $ (". Mybox"). AddClass ("color1");

Классы CSS также могут быть динамически изменены, но у меня нет хорошего примера дляjavascript для этого.

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

...