Meilleure pratique pour définir des règles CSS via JavaScript

Je charge une feuille de style qui est uniquement requise lorsque javascript est activé. Plus précisément, il ne doit pas être présent si JavaScript est désactivé. Je le fais dès que possible (dans la tête) avant que toutes les bibliothèques javascript sont chargées. (Je charge tous les scripts le plus tard possible). Le code pour le chargement de cette feuille de style est externe simple, et ressemble à ceci:Meilleure pratique pour définir des règles CSS via JavaScript

var el = document.createElement('link'); 
el.setAttribute('href','/css/noscript.css'); 
el.setAttribute('rel','stylesheet'); 
el.setAttribute('type','text/css'); 
document.documentElement.firstChild.appendChild(el);

Il fonctionne très bien, mais tout mon fichier CSS contient à l'heure actuelle est la suivante:

.noscript { 
    display: none; 
}

Cela n'a pas vraiment Je demande de charger un fichier, donc je pense juste à définir la règle dynamiquement en JavaScript. Quelle est la meilleure pratique pour cela?. Un examen rapide de diverses techniques montre qu'il nécessite un peu de piratage de plusieurs navigateur.

P.S. la plénière ne publie pas d'exemples jQuery. Cela doit être fait sans bibliothèques.

Source

2010-04-03 Tim Whitlock

repérer l'erreur délibérée? * tousse * Je voulais écrire qu'il charge "script.css", pas "noscript.css" –

Hmm. Si vous enregistrez quelques octets de bande passante est pas un problème, pourquoi ne pas charger les feuilles de style, mais préfixe toutes les classes du JavaScript un avec une classe spécifique:

body.hasjs a { color: blue } 
body.hasjs div.contactform { width: xyz; }

servent le corps sans cette classe

<body>

et ajouter un petit JavaScript qui ajoute le nom de la classe, quelque chose comme:

body.onload = function() { 
document.body.className = "hasjs"; 
}

pour obtenir le processus de commutation encore plus tôt, vous pouvez regarder dans l'un des natifs Javascript onDOML solutions OAD.

Source

2010-04-03 08:42:43

setAttribute est cassé dans Internet Explorer - il échouera chaque fois que l'attribut en cours a un nom qui n'est pas identique à la propriété cartes sur la même valeur. Puisque class est un mot-clé réservé, la propriété est appelée className, donc cela casse. Utilisez foo.className = 'valeur'. – Quentin

Il n'est pas nécessaire de définir un identifiant sur le corps. Accédez-y avec 'document.body' à la place. – Quentin

C'est propre, je n'avais pas pensé à utiliser un sélecteur de haut niveau comme ça. Il serait préférable de servir avec la classe "nojs" et ensuite retirer la classe le plus tôt possible avec JS activé –

Meilleure pratique pour définir des règles CSS via JavaScript

Répondre

Questions connexes