Changer tous les styles CSS avec une propriété via Jquery

Question

Sur une page j'inclure certains par exemple css:

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

Je souhaite modifier ensuite la propriété « couleur » mis à la fois dans myBOX et myBox2 dans jquery, sans connaître le nom réel (myBox, myBox2) du style CSS. En d'autres termes, je veux mettre à jour TOUS les styles css sur la page où color = certaine valeur, puis mettre à jour border = where certaine valeur.

Un exemple (pas de code valide) peut-être:

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

Comment cela pourrait-il être possible en utilisant jquery?

Answer 1

Vous devriez peut-être envisager de refactoriser votre HTML + CSS. Tout le but de CSS est de «cascader» les styles sur votre site. Donc, il serait logique génial d'avoir quelque chose comme ceci a déclaré:

body {color:#333;} 

La propriété CSS ci-dessus est héritée dans tous les éléments sur votre site. Quand vient le temps de changer les styles que vous pouvez remplacer le style ci-dessus avec votre propre:

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

Ou bien, peut-être que vous voulez jeter un oeil à un sélecteur de feuille de style, cela vous donne plus de payer une amende de contrôle de grain de votre CSS (example), ces feuilles de style peuvent être générées lors de l'exécution, en utilisant un langage de programmation côté serveur (par exemple, PHP) en utilisant une similaire URL à:

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

Answer 2

Je ne sais pas si cela fonctionne pour vous, car il est complètement une approche différente.

Plutôt que d'utiliser la couleur css, utilisez la classe pour cibler les éléments et ajouter une nouvelle classe contenant la couleur css.

Par exemple

css

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

Si vous avez le plein contrôle du html il suffit d'ajouter la classe de couleur en plus de la classe .mybox. Si vous ne pouvez pas faire cela, quelque chose comme $ (". Mybox"). AddClass ("color1");

Les classes css peuvent également être changées dynamiquement, mais je n'ai pas un bon exemple pour le javascript.

Si vous le pouvez, c'est probablement une meilleure solution que de trouver des éléments par leur attribut de couleur. Si vous essayez d'échanger des couleurs, dites mybox est rouge et mybox2 est bleu. Pour échanger les couleurs, vous devez définir temporairement une couleur sur une couleur unique. Sinon, lorsque vous définissez tous les éléments rouges sur bleu, mybox et mybox2 seront tous deux bleus et tous les éléments bleus seront mis en rouge pour que mybox revienne au rouge et mybox2 devienne rouge. J'espère que cela t'aides.

Answer 3

$(document).ready(function() { 

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

}); 

Pour de meilleures performances ne pas utiliser le sélecteur « du corps » comme dans le code ci-dessus, utilisez plutôt le sélecteur spécifique que vous souhaitez que les modifications prennent effet dans ses éléments descendants. Traverser tous les éléments du corps et exécuter la fonction de filtre pour chacun d'entre eux est lourd pour les grandes pages, alors changez de corps avec un sélecteur plus spécifique si vous pouvez et/ou mettez un sélecteur dans "find", exemple: $ ("#my_content"). find ("p"). filter (fonction() {...

Note: La valeur de retour: $ (this) Css (« couleur ») est au format rgb, donc utiliser le format rgb pour définir la couleur à modifier dans la fonction de filtre au-dessus