11548 sujets

JavaScript, DOM et API Web HTML5

Comment activer une feuille de style par javascript ? [ résolu ]

Bonjour,
J'ai fait un menu avec une liste non ordonnée, qui devient dynamique quand javascript est activé. Je souhaite donc valider la feuille de style par javascript.
J'ai donc inscrit dans le head de ma page :
<link rel="alternate stylesheet" href="menu.css" type="text/css" title="menu_js" />
et dans mon script ceci :
document.getElementsByTagName("link")[0].disabled=false;
mais bien sur ça ne fonctionne pas

Actuellement,c'est initié par un document.write : aperçu
et après modification:aperçu
Modifié par chmel (02 Sep 2005 - 13:46)
document.getElementsByTagName("link")[0] renvoie le nœud de nom 'link', ce qui est différent au sens du DOM de la feuille de style elle-même.

Il te faut utiliser le DOM Style:
http://www.yoyodesign.org/doc/w3c/dom2/style/stylesheets.html#StyleSheets-LinkStyle

document.getElementsByTagName("link")[0].sheet.disabled=false;


À tester pour savoir quels navigateurs supportent cette attribut d'objet (Firefox le supporte).

Sinon:

document.styleSheets[x].disabled = false;


Opera ne connaît pas la collection styleSheets. Safari la connaît mais ne permet pas d'activer ou désactiver une feuille de style dynamiquement.

http://www.quirksmode.org/dom/w3c_css.html#properties
Modifié par Bobe (29 Jul 2005 - 02:30)
Merci Bobe pour cette réponse super documentée. J'ai adopté la deuxième solution qui fonctionne également sur IE5.0.

Je vais devoir conserver ma méthode write() pour Opéra, pourtant compatible DOM2 Smiley decu

ça ne marche plus chez opera. Connais-tu une solution avec createElement ?
Merci
Modifié par chmel (29 Jul 2005 - 13:43)
Jai trouvé une solution qui fonctionne aussi sur OPERA : 
<link rel="stylesheet" type="text/css" title="menu_js" />
et dans mon script ceci :
document.getElementsByTagName("link")[0].href="menu.css";

aperçu
Modifié par chmel (30 Jul 2005 - 11:28)
bonjour chmel,

Sais-tu que le résultat est assez déprimant avec CSS activé et javascript désactivé ?

Qu'est-ce qui peut bien justifier de s'appuyer une triple liste emboîtée, tout simplement parce que javascript est désactivé ?

ça ne fait pas très "solide", comme solution, au final Smiley cligne
Laurent Denis a écrit :
bonjour chmel,

Sais-tu que le résultat est assez déprimant avec CSS activé et javascript désactivé ?


Bonjour, chapeau pour tes travaux et merci de t'intéresser à mon projet en cours.
Je cherchait d'abord à activer la feuille de style qui sert au menu js, compatible avec tous les navigateurs acceptant DOM1 et javascript, sans utiliser la méthode write() . C'est peut-être un peu d'arriére garde.

Les sous-menus ne doivent être cachés que dans ce cas.

Je teste sur IE5.0, NS6, OP7, moz, et Firefox.
Maintenant, je vais essayer avec 3 feuilles de style :
- menu.css pour "CSS activé et javascript désactivé"
- dyn_js.css activée par le script pour le dynamisme javascript
- dyn_css2.css dynamique CSS2 (toutes les class utilisées ici peuvent être reproduites en CSS2)

Qu'est-ce qui peut bien justifier de s'appuyer une triple liste emboîtée, tout simplement parce que javascript est désactivé ?

Je ne comprends pas très bien la question, mais c'est d'abord une page test, puis le but est un script non intrusif facile à utiliser pour animer un menu multiniveaux.

ça ne fait pas très "solide", comme solution, au final Smiley cligne
Le final n'est pas atteinds Smiley langue
Modifié par chmel (01 Aug 2005 - 11:19)
Sujet clos
Aller à