communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > js tutoriel > JavaScript插入动态样式实现代码_javascript技巧

JavaScript插入动态样式实现代码_javascript技巧

WBOY
Libérer： 2016-05-16 17:56:04
original
1097 Les gens l'ont consulté

与动态脚本类似，所谓动态样式是指在页面刚加载时不存在的样式；动态样式是在页面加载完成后动态添加到页面中。

我们以下面这个典型的元素为例：

使用DOM代码可以很容易的动态创建出这个元素：

复制代码 代码如下:

var link = document.createElement("link");
link.rel = "stylesheet";
link.type = "text/css";
link.href = "style.css";
var head = document.getElementsByTagName("head")[0];
head.appendChild(link);

以上代码在所有主流浏览器中都可以正常运行。需要注意的是，必须将元素添加到而不是元素，才能保证在所有浏览器中的行为一致。整个过程可以用一下函数来表示：
复制代码 代码如下:

function loadStyles(url) {
var link = document.createElement("link");
link.rel = "stylesheet";
link.type = "text/css";
link.href = url;
var head = document.getElementsByTagName("head")[0];
head.appendChild(link);
}
loadStyles("style.css")

加载外部样式文件的过程是异步的，也就是加载样式与执行JavaScript代码的过程没有固定的次序。

另一种定义样式的方式是使用

按照相同的逻辑，下列DOM代码应该是有效的：
复制代码 代码如下:

var style = document.createElement("style");
style.type = "text/css";
style.appendChild(document.createTextNode("body{background-color:red;}"));
var head = document.getElementsByTagName("head")[0];
head.appendChild(style);

以上代码可以在Firefox、Safrai、Chrome和Opera中运行，在IE中则会报错。IE将
Étiquettes associées：
动态样式
source：php.cn
Article précédent：《JavaScript高级程序设计》阅读笔记（一） ECMAScript基础_javascript技巧 Article suivant：JavaScript 代码压缩工具小结_javascript技巧
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?
Depuis 2024-04-23 00:22:19
0
9
1588
Déplacez le contenu vers la gauche en ajoutant la propriété Largeur J'ai prévu des marges au corps. main {gauche marge : 200px ; marge droite : 200px ; aligne...
Depuis 2024-04-06 22:01:35
0
3
816
Comment déclencher le rendu (avec filtre et pagination) sur la méthode de tri dans React ? Voici mon composant de style Sort.js : <SortWrapper><SortText>SortBy</SortT...
Depuis 2024-04-06 21:28:37
0
1
2257
Modifier dynamiquement les styles CSS en ligne dans Javafx J'essaie de changer l'image d'arrière-plan d'un volet lorsque l'application est agrandie. ...
Depuis 2024-04-06 20:57:16
0
1
487
Problèmes rencontrés lors de l'utilisation d'opentbs pour générer des fichiers odt : les valeurs d'une même clé sont affichées dans la même ligne au lieu de colonnes séparées. J'utilise une bibliothèque appelée OpenTbs pour créer odt en utilisant PHP, je l'utilise c...
Depuis 2024-04-06 20:18:18
0
1
483
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal