Maison >interface Web >js tutoriel >Comment charger des fichiers CSS en utilisant JavaScript ? (exemple de code)

Comment charger des fichiers CSS en utilisant JavaScript ? (exemple de code)

青灯夜游original: 2019-02-23 09:59:543630parcourir

Les fichiers CSS sont utilisés pour décrire la façon dont les éléments HTML sont affichés, et il existe différentes manières d'ajouter des fichiers CSS aux documents HTML. JavaScript peut charger des fichiers CSS dans des documents HTML, alors comment utiliser JavaScript pour charger des fichiers CSS ? L'article suivant vous le présentera, j'espère qu'il vous sera utile. [Recommandation du tutoriel vidéo : Tutoriel JavaScript]

Comment faire :

● Récupérez l'élément d'en-tête HTML à l'aide de la méthode document.getElementsByTagName().

● Utilisez la méthode createElement('link') pour créer un nouvel élément de lien.

QuantityInitialisez les attributs de l'élément de lien.

●Ajoutez l'élément de lien à l'en-tête.

Exemple de code

Ce qui suit est un exemple de code pour voir comment JavaScript charge les fichiers CSS dans les documents HTML.

Exemple 1 :

Créez un fichier nommé style.css :

.demo { 
width: 400px;
height: 200px;
border: 1px solid red;
    color:red; 
    margin: 50px auto;
    text-align: center;
    line-height: 200px;
}

Ajoutez un fichier CSS en utilisant JavaScript :

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8">
    <title> 
        Load CSS file using JavaScript 
    </title> 
  
    <script> 
          
        // 获取HTML头元素
        var head = document.getElementsByTagName(&#39;head&#39;)[0];  
  
        // 创建新链接元素
        var link = document.createElement(&#39;link&#39;); 
  
        // 设置链接元素的属性
        link.rel = &#39;stylesheet&#39;;  
      
        link.type = &#39;text/css&#39;; 
      
        link.href = &#39;style.css&#39;;  
  
        // 将链接元素附加到HTML头
        head.appendChild(link);  
    </script>  
</head> 
  
<body> 
    <h2 class="demo">php中文网！</h2> 
</body> 
  
</html>

Sortie :

Comment charger des fichiers CSS en utilisant JavaScript ? (exemple de code)

Exemple 2 :

Code du fichier style.css :

.demo { 
width: 400px;
height: 100px;
border: 1px solid green;
    font-size:25px; 
    font-weight:bold; 
    color:white; 
    background-color:pink; 
    text-align:center; 
    line-height: 100px;
    margin: 50px auto;
}

Utilisez JavaScript pour ajouter des fichiers CSS

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8">
    <title> 
        Load CSS file using JavaScript 
    </title> 
  
    <script> 
          
        // 创建新链接元素
        var link = document.createElement(&#39;link&#39;);  
  
        // 设置链接元素的属性
        link.rel = &#39;stylesheet&#39;;  
        link.type = &#39;text/css&#39;; 
        link.href = &#39;style.css&#39;;  
        
        // 获取 head元素以向其追加链接元素
        document.getElementsByTagName(&#39;head&#39;)[0].appendChild(link); 
    </script>  
</head>  
<body> 
    <h2 class="demo">php中文网！</h2> 
</body> 
</html>

Sortie :

Comment charger des fichiers CSS en utilisant JavaScript ? (exemple de code)

Ce qui précède est l'intégralité du contenu de cet article, j'espère qu'il sera utile pour tout le monde apprend. Pour un contenu plus passionnant, vous pouvez prêter attention aux colonnes de didacticiels pertinentes du site Web PHP chinois ! ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

php JavaScript css html

Déclaration：

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

Article précédent：comment fonctionne ajaxArticle suivant：comment fonctionne ajax

Comment charger des fichiers CSS en utilisant JavaScript ? (exemple de code)

Articles Liés