11548 sujets

JavaScript, DOM et API Web HTML5

Modification css sur onload

Bonjour
Sur mon site, j'ai besoin de changer certaines propriétés css (background notamment) sur certaine pages.
Pour ne pas redéfinir une feuille de style par page, j'ai pensé utiliser l'évènement onload sur le chargement de ma page pour appeler une fonction qui va modifier directement mes propriétés css:

<body onload="ChangeCssProps('#000000');>

et ma fonction js:
<SCRIPT language="nom" type="text/javascript">	
function ChangeCssProps(bgcolor){ 
	document.getElementById("contenu").style.backgroundColor = bgcolor;  
} 
</SCRIPT>


Et ça marche. Sauf que certaines pages étant un peu longues à charger, j'apercois (comme un flash) la couleur par défaut avant d'avoir la nouvelle.

Une idée?
MoOx a écrit :
Pourquoi ne pas simplement mettre une class CSS sur le body selon la page ?

la mise en page de l'écran est un peu plus complexe qu'un simple body. J'ai plusieurs parties dans mon écran et seule l'une d'elles doit être modifiée...
Oui mais tu peux signer ton body par une class ou id afin d'avoir des mises en formes spécifiques à une page sans changer le balisage et les attributs:

#unId { propriétés }
#bodySigné #unid { propriétés différentes}
Le problème me semble structurel, si la mise en page dynamique récupère le contenu du body et le place dans un bloc, alors si cela prend du temps effectivement pour des volumes importants on constate des modifications lorsque la page finit de se charger.

Solution: éviter la mise en page dynamique après chargement du contenu.
l'event body.onload n'est lancé qu'une fois que TOUT le contenu de la page est chargée, ce qui inclue JS/CSS/images.
si ton HTML se charge rapidement, ou du moins en une seule fois tu peux utiliser un event qu'on appelle DOMContentLoaded qui se lance lorsque le HTML est là. Cet event étant mal supporté par les anciens IE, les librairies JS ont pris le relai :
http://developer.yahoo.com/yui/examples/event/event-timing.html
http://forums.asp.net/t/1068265.aspx
et je sais que jQuery le fait aussi mais je n'ai pas trouvé la page

cela dit je me demande bien dans quelle situation tu te retrouves pour ne pas avoir accès au css de toutes tes pages ? en terme de maintenance et de perfs, ta solution pour modifier des styles est une des pires Smiley biggrin
paolo a écrit :
Oui mais tu peux signer ton body par une class ou id afin d'avoir des mises en formes spécifiques à une page sans changer le balisage et les attributs:

#unId { propriétés }
#bodySigné #unid { propriétés différentes}

ce qui sous-entend créer une class/id à chaque fois que mon contenu/fond doit être différent... pas très simple à maintenir

Pax a écrit :
Le problème me semble structurel, si la mise en page dynamique récupère le contenu du body et le place dans un bloc, alors si cela prend du temps effectivement pour des volumes importants on constate des modifications lorsque la page finit de se charger.
Solution: éviter la mise en page dynamique après chargement du contenu.

j'avoue que j'ai du mal à saisir Smiley ohwell
jpvincent a écrit :
cela dit je me demande bien dans quelle situation tu te retrouves pour ne pas avoir accès au css de toutes tes pages ? en terme de maintenance et de perfs, ta solution pour modifier des styles est une des pires Smiley biggrin

En gros, ma page présente ce qu'on pourrait appeler des articles. La structure de la page ne bouge pas, seul le contenu est mis à jour (balise div). Dans certains cas, je veux un fond différent pour mon article. J'ai donc stocké la valeur de mon fond en base, avec mon article, et je l'applique à la volée.
ce qui sous-entend créer une class/id à chaque fois que mon contenu/fond doit être différent... pas très simple à maintenir

Si justement, c'est très simple et en tout cas bien plus que du js qui est superflu pour de la mise en forme, si c'est bien de cela dont il s'agit
Sujet clos
Aller à