Charger le fichier CSS via fonction JS

Résolu
nicodak Messages postés 49 Date d'inscription   Statut Membre Dernière intervention   -  
jordane45 Messages postés 38480 Date d'inscription   Statut Modérateur Dernière intervention   - 25 janv. 2021 à 17:10
Bonjour,

Je tente une petite fonction qui permettrait de charger le fichier CSS dans un fichier HTML.
Cela n'a pas d'objectif autre que de manipuler du code JS, voici le code que j'essaie mais qui malheureusement ne fonctionne pas. 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="bar">
      <div class="title">Bienvenue sur mon site.</div>
    </div>
    <script>
      function charger_css(){
        var css = document.createElement("css");
        css.src = "test.css";

        document.head.appendChild(css);
      }
    </script>
  </body>
</html>

Y voyez-vous l'erreur ?
Merci !

Configuration: Windows / Firefox 85.0
A voir également:

2 réponses

Réponse 1 / 2
jordane45 Messages postés 38480 Date d'inscription   Statut Modérateur Dernière intervention   4 746
 
Bonjour,

Déjà... à quel moment appelles tu ta fonction ?

Ensuite, tu ne créés pas un "css" .. mais une balise style 
 // Create new link Element 
        var link = document.createElement('link');  
  
        // set the attributes for link element 
           link.rel = 'stylesheet';  
      
        link.type = 'text/css'; 
      
        link.href = 'test.css';

0
Réponse 2 / 2
nicodak Messages postés 49 Date d'inscription   Statut Membre Dernière intervention   1
 
Bonjour Jordan,

Merci pour votre réponse.
Effectivement j'étais loin du compte.

Je comprends maintenant pour la création de la balise <link
Et donc comment puis-je appeler cette balise dans le fichier html entre les balises <head> ?

Ce bout de code ne devrait pas le faire ? 
document.head.appendChild(link);
0
jordane45 Messages postés 38480 Date d'inscription   Statut Modérateur Dernière intervention   4 746
  
<script>
  function mafonction(){
     alert("toto");
  }
 

 mafonction();  // va faire appel à ma fonction

</script>


A noter qu'on évite de placer son JS dans le head
on le place avant le </body>
0
nicodak Messages postés 49 Date d'inscription   Statut Membre Dernière intervention   1 > jordane45 Messages postés 38480 Date d'inscription   Statut Modérateur Dernière intervention  
 
Oui le script se trouve bien juste avant le </body> dans mon premier message.
Mais le but de la fonction c'est qu'elle crée le <link css... entre les balises <head> à son emplacement classique je dirais.
0
jordane45 Messages postés 38480 Date d'inscription   Statut Modérateur Dernière intervention   4 746 > nicodak Messages postés 49 Date d'inscription   Statut Membre Dernière intervention  
  
// Create new link Element 
        var link = document.createElement('link');  
  
        // set the attributes for link element 
           link.rel = 'stylesheet';  
      
        link.type = 'text/css'; 
      
        link.href = 'test.css';  
// Get HTML head element to append  
        // link element to it  
        document.getElementsByTagName('HEAD')[0].appendChild(link);
0