Récemment, je travaillais sur un projet et j'avais besoin de JavaScript pour insérer dynamiquement les styles, mais la méthode précédente a échoué! La raison pour laquelle j'ai vérifié 2 heures était que j'étais une personne salope. Parlons-en à la fin!
Le style d'insertion JavaScript est largement utilisé dans le développement frontal, en particulier lors de la modification des performances frontales et du skinning de la page. La tâche que j'ai faite récemment est que l'utilisateur clique sur un bouton sur un autre site et insère un script sous une autre page de site pour l'exécuter, qui comprend l'insertion de style.
D'une manière générale, il existe deux types de styles d'insertion dynamique pour JavaScript. L'une consiste à introduire des styles externes dans la page, à utiliser la balise <ink> dans <A-thead> pour introduire un fichier de style externe, et l'autre est d'utiliser la balise <style> pour insérer le style de page dans la page (l'un mentionné ici n'est pas l'attribut de style).
1. Introduisez des styles externes dans la page:
Utilisation de la balise <ink> dans <Aad> pour introduire un fichier de style externe, c'est relativement simple, et il n'y a pas de problèmes de compatibilité pour chaque navigateur grand public:
La copie de code est la suivante:
fonction includeLinkstyle (url) {
var link = document.createElement ("lien");
link.rel = "Stylesheet";
link.type = "text / css";
link.href = url;
document.getElementsByTagName ("Head") [0] .APPEndChild (lien);
}
IncludeLinkstyle ("http://css.vevb.com/home/css/reset.css?v=20101227");
Cependant, dans le projet que je fais actuellement, il y a très peu de styles appliqués par lui-même, et il semble inapproprié d'introduire directement un fichier de style externe, j'ai donc choisi la deuxième solution, en utilisant la balise <style> pour insérer le style de page dans la page.
2. Utilisez la balise <style> pour insérer le style de page:
Cette méthode a des problèmes de compatibilité dans divers navigateurs traditionnels. Les navigateurs standard tels que Firefox ne peuvent pas obtenir directement la valeur CSSText de la feuille de style. Dans les navigateurs standard, ils ne peuvent utiliser que document.stylesheets [0] .cssrules [0] .cssText pour obtenir les styles individuellement; En même temps, utilisez: document.stylesheets [0] .cssrules [0] .csstext = newcSStext; La page ne mettra pas automatiquement à jour le style, et vous devez utiliser: document.stylesheets [0] .cssrules [0] .style.csstext = newcsStext; Cela ne semble pas être humanisé et simple à utiliser. Une bonne méthode est utilisée dans yui: style.appendChild (document.CreateTextNode (styles)); Utilisez CreateTextNode pour ajouter des chaînes de style à la balise <style>;
La copie de code est la suivante:
fonction incluseyleElement (styles, styleID) {
if (document.getElementById (styleId)) {
Retour
}
var style = document.CreateElement ("style");
style.id = styleId;
// Il est préférable de définir les propriétés suivantes pour IE ici
/ * if (isie ()) {
style.type = "text / css";
style.media = "écran"
} * /
(document.getElementsByTagName ("Head") [0] || Document.Body) .APPEndChild (style);
if (style.stylesheet) {// pour ie
style.stylesheet.csstext = styles;
} else {// pour w3c
Style.ApendChild (document.CreateTextNode (styles));
}
}
var styles = "#div {background-Color: # ff3300; couleur: #fffff}";
InclutSetyleElement (styles, "Newstyle");
De cette façon, les éléments de la page peuvent être directement appliqués au style, que vos éléments soient ajoutés via le script.
À propos de la main idiote:
Regardez ce code:
La copie de code est la suivante:
var divobj = document.CreateElement ("div");
divobj.id = "__div";
divobj.innerhtml = "Test js insert Dom and Style";
Document.Body.ApendChild (Divobj);
var styles = "#__ div {background-Color: # ff3300; couleur: #fffff}";
InclutSetyleElement (styles, "Newstyle");
Comme mentionné précédemment, ce projet est lorsqu'un utilisateur clique sur un bouton sur un autre site et insère un script sous une autre page de site pour l'exécuter. Cela inclut l'insertion de style. Afin d'assurer le caractère unique de l'ID d'élément que j'ai créé autant que possible, j'ai ajouté "__" devant l'ID d'élément pour indiquer que la protection privée contre les conflits. En conséquence, la tragédie a été causée. La dénomination de IE6, IE7 Class et Id ne pouvait pas commencer par le soulignement ("_"), et j'ai vraiment oublié cela! Il a fallu deux heures pour découvrir la raison. C'est une tragédie! Dessinez une conclusion! Ne soyez pas bon marché lorsque vous faites le front-end!