Изменение всех стилей CSS со свойством с помощью Jquery

Question

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

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

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

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

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

Как это может быть возможно с помощью JQuery?

Answer 1

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

body {color:#333;} 

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

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

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

/css/generate-css.php?color=purple 

Answer 2

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

Вместо использования цвета 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 станет красным. Надеюсь это поможет.

Answer 3

$(document).ready(function() { 

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

}); 

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

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