web-dev-qa-db-fra.com

Comment changer dynamiquement un style css de classe?

Objectif

Dans mon programme, je veux faire les deux choses avec jquery/javascript:

  1. Changer le style des classes css de manière dynamique
  2. Ajouter/supprimer des classes aux éléments

Problème

Pour faire la première chose que j'utilise, la méthode $(".className").css(), mais elle change de style uniquement pour les éléments qui déjà ont la classe className, c'est-à-dire si je later ajoute className à un élément son style ne sera pas nouveau. Comment puis-je résoudre ça?

Exemple

Voir aussi à jsfiddle .

$("p").addClass("redclass");
$(".redclass").css("color", "darkRed");
$("span").addClass("redclass");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>I want to be red! And I am.</p>
<span>I want to be red too but I'm not :'(</span>

Résultat:

 enter image description here

javascriptjqueryhtmlcss
6
Philip Voronov

Un format plus court:

$("<style/>", {text: ".redclass {color: darkRed;}"}).appendTo('head');

L'extrait:

$("<style/>", {text: ".redclass {color: darkRed;}"}).appendTo('head');


$("p").addClass("redclass");

$("span").addClass("redclass");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<p>I want to be red! And I am.</p>
<span>I want to be red too but I'm not :'(</span>

12
gaetanoM

@ synthet1c a décrit le problème. Ma solution est:

$("head").append('<style></style>');
var element = $("head").children(':last');
element.html('.redclass{color: darkred;}');
5
Alec von Barnekow

Bien que d’autres réponses (de travail) aient été fournies, elles ne répondent pas réellement à votre question - c’est-à-dire qu’elles ne ne modifient pas la classe css spécifiée, mais la surchargent en ajoutant une autre règle plus tard document.

Ils y parviennent, essentiellement:

Avant 

.someClass
{
  color: red;
}

Après 

.someClass
{
  color: red;
}

.someClass
{
  color: white;
}

Dans de nombreux cas, une meilleure option serait de modifier l'attribut color de la règle existante.

Il se trouve que le navigateur conserve une collection de feuilles de style, de règles de feuille de style et d’attributs desdites règles. Nous préférerons peut-être plutôt trouver la règle existante et la modifier. (Nous préférerions certainement une méthode qui vérifie les erreurs par rapport à celle que je présente!)

Le premier message de la console provient de la 1 instance d'une règle #coords . Les trois suivants proviennent des 3 instances de la règle .that

function byId(id){return document.getElementById(id)}

window.addEventListener('load', onDocLoaded, false);

function onDocLoaded(evt)
{
	byId('goBtn').addEventListener('click', onGoBtnClicked, false);
}

function onGoBtnClicked(evt)
{
	alterExistingCSSRuleAttrib('#coords', 'background-color', 'blue');
	alterExistingCSSRuleAttrib('.that', 'color', 'red');
}

// useful for HtmlCollection, NodeList, String types (array-like types)
function forEach(array, callback, scope){for (var i=0,n=array.length; i<n; i++)callback.call(scope, array[i], i, array);} // passes back stuff we need

function alterExistingCSSRuleAttrib(selectorText, tgtAttribName, newValue)
{
	var styleSheets = document.styleSheets;
	forEach(styleSheets, styleSheetFunc);

	function styleSheetFunc(CSSStyleSheet)
	{
		forEach(CSSStyleSheet.cssRules, cssRuleFunc);
	}

	function cssRuleFunc(rule)
	{
		if (selectorText.indexOf(rule.selectorText) != -1)
		forEach(rule.style, cssRuleAttributeFunc);

		function cssRuleAttributeFunc(attribName)
		{
			if (attribName == tgtAttribName)
            {
				rule.style[attribName] = newValue;
                console.log('attribute replaced');
            }
		}
	}
}
#coords
{
    font-size: 0.75em;
	width: 10em;
	background-color: red;
}
.that
{
	color: blue;
}
<style>.that{color: green;font-size: 3em;font-weight: bold;}</style>

<button id='goBtn'>Change css rules</button>
	<div id='coords' class='that'>Test div</div>

<style>.that{color: blue;font-size: 2em;font-weight: bold;}</style>

4
enhzflep

Le problème avec lequel vous rencontrez un problème est que lorsque vous utilisez le sélecteur jQuery $('.redclass').css('color', 'darkRed'), vous obtenez tous les éléments qui ont actuellement cette classe et utilisez javascript pour parcourir en boucle la collection et définir la propriété style.

Vous définissez ensuite la classe sur la plage suivante. Ce qui n'était pas inclus dans la collection au moment de la mise en couleur

Vous devez définir la classe dans votre fichier css afin qu’elle soit distribuée à tous les éléments ayant cette classe.

console.log($('.redclass').length)
$("p").addClass("redclass");
console.log($('.redclass').length)
// $(".redclass").css("color", "darkRed");
$("span").addClass("redclass");
console.log($('.redclass').length)
.redclass {
  color: darkRed;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>I want to be red! And I am.</p>
<span>I want to be red too but I'm not :'(</span>

0
synthet1c