11522 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Création dynamique d'une balise <style> en Javascript

Bonjour à tous
Je constate que si je crée une balise <style> en Javascript et que je l'insère dans <head> elle est bien présente dans le DOM mais n'a pas l'air d'être prise en compte dans la mise en forme de la page.
Bien entendu, c'est peut être que, malgré tous les soins que j'ai pris, il y a des erreurs dans le CSS, mais il me semble plutôt que c'est ce mécanisme qui ne fonctionne pas.
Auriez vous déjà tenté avec succès une chose de ce genre?
Après ce nouveaux essais, ça semble fonctionner correctement sur un cas ad-hoc pour le test.
Il doit y avoir une erreur dans le CSS fabriqué par le script.
Bonjour PapyJP,
Si tu as déjà des css déclarées dans ton header (externe ou dans balise style)
Je pense que tu dois faire attention à l’endroit où tu l’insères par rapport aux autres
car je pense que tu risques d'avoir des problèmes d'héritages (c'est de la théorie je n'ai pas vraiment essayé)
Oui, bien entendu.
En fait c'est le but même de mon programme; ajouter à la fin du <head> une balise <style> qui prend le dessus sur ce qui est déclaré au dessus.
La raison pour laquelle je fais ça:
J'ai une assez grosse <table> remplies par JS avec des données qui proviennent d'un fichier JSON.
Ces données sont dans des cellules avec la structure suivante:

<td class="nom-de-la-colonne">
    <div class="info">les données de la cellule</div>
</td>

Dans <head> j'ai une balise

<link href="fichier.css" rel="stylesheet" type="text/css>

Ce fichier contient des directives qui permettent de configurer correctement la table.
Mais par la suite il va y avoir des interactions avec l'utilisateur qui auront comme résultat de modifier le contenu des <div class="info">
Si je ne fais rien de particulier, cela amène la largeur des cellules à se modifier, ce que je veux éviter.
Ce que fait mon script, c'est générer une balise <style> qui a pour but de forcer la largeur des <div class="info"> à la valeur acquise lorsque la table a été modifiée, et à remplacer les directives white-space:nowrap; par white-space:normal;
Je mets cette balise en fin de <head> et quand elle est mise en place, la largeur des cellules est figée pour toute la durée d'affichage de la page, quelles que soient les modifications qui sont apportées au contenu des <div class="info">.

Pour ceux que ça intéresse, il est indispensable de mettre les données dans des <div>. Si on les met directement dans <td>, on ne peut pas figer la largeur des cellules. La propriété width d'une cellule n'est qu'une indication prise en compte par le moteur CSS pour calculer au mieux l'aspect d'une table, ce n'est pas une largeur impérative.
Modifié par PapyJP (08 Feb 2019 - 23:35)
Modérateur
Bonjour,

Quand on ajoute du css au html avec JS, on peut avoir pas mal de surprise selon la méthode employée, selon le navigateur, et selon le moment où on exécute le code JS qui ajoute le css.

Ci-dessous un code assez portable :

function addCssRule(css)
{
	var s;
	document.getElementsByTagName('head')[0].appendChild(document.createElement("style"));
	s=document.styleSheets[document.styleSheets.length-1];
	s.insertRule(css,0);
};


Amicalement,
Modifié par parsimonhi (09 Feb 2019 - 09:38)
Merci de ta réponse
Elle consiste à ajouter des règles à la dernière balise <style> du <head>.
Encore faut-il qu'il y ait des balises <style> dans la balise <head>, mais bien sûr on peut toujours en mettre une vide en prévision.
Dans quel cas penses tu que ma solution ne fonctionnerait pas?
Modérateur
Bonjour,

Justement, le code que j'ai fourni prévoit le cas où il n'y a pas encore de balise "style".

Pour ce qui est de ta solution, sans le code et le moment exact où tu le déclenches (en fin de chargement du DOM ? ou bien une fois la page complètement chargée, ou bien encore plus tard, ou bien plus tôt ?), difficile de dire s'il marche ou pas (si ça se trouve, il marche très bien).

Amicalement,
Apparemment il marche très bien
La page est complètement chargée (avec peu de choses). Un script est lancé à la fin, juste devant </body>, il génère la table et à la fin il génère la balise <style>.
Je laisse tel quel pour le moment, j’utiliserai ta solution si je trouve un problème.
Sujet clos
Aller à