Dans certains cas, il est nécessaire de définir des déclarations CSS en fonction d’une action par exemple.

Prenons une exemple concret :

Nous avons un conteneur qui a été mis à une hauteur de 0 pixels dans l’attente d’un clic, ce clic doit modifier sa hauteur afin d’avoir à l’écran l’affichage de son contenu, mais si nous scrollons par exemple, la taille est remise à 0.

Contraintes :

• La taille du contenu est connue uniquement au moment du clic
• Nous ne pouvons pas supprimer les évènements existant (scroll et clic)
• Nous ne connaissons pas les éléments accrochés aux évènements.

Problématique :

Nous souhaitons conserver la taille du conteneur et son affichage à partir du moment où le clic est réalisé.

Le contexte pourrait être complètement différent, c’est uniquement pour justifier l’utilisation de la technique que je vais vous présenter, technique qui peut par ailleurs être utilisée comme vous le souhaitez.

Mise en place du code :

jQuery('.button').on('click', function() {
	var container = jQuery('.content');
	var height = container .find('li').length * 100; // Valeur arbitraire

	/* Create onfly css file to avoid inline changes */
	var $stylesheet = $('<style type="text/css" media="screen" />');
	$stylesheet.html('.content{ height:'+height+'px !important; }');
	$('body').append($stylesheet);

	container.show();
});

La partie importante est celle en gras, elle va nous permettre de générer du code CSS, de l’injecter dans la page et ainsi ne plus subir le redimensionnement externe.

Évidemment il est possible de définir d’autres déclarations CSS, ajouter des classes ou id …

J’utilise jQuery mais cette solution est portable à javascript sans problème.

Je n’ai jamais eu besoin de cette technique, mais ayant été confronté à un cas bien précis, c’est las seule solution simple qui était applicable.