Charger le fichier CSS via fonction JS

Résolu/Fermé

nicodak Messages postés 50 Date d'inscription vendredi 21 août 2020 Statut Membre Dernière intervention 2 juin 2021 - 18 janv. 2021 à 12:01
jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 - 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:

Charger le fichier CSS via fonction JS
Fichier rar - Guide
Fichier host - Guide
Fichier iso - Guide
Fonction si et - Guide
Comment réduire la taille d'un fichier - Guide

2 réponses

Réponse 1 / 2

jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
18 janv. 2021 à 13:16

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';

Réponse 2 / 2

nicodak Messages postés 50 Date d'inscription vendredi 21 août 2020 Statut Membre Dernière intervention 2 juin 2021 1
Modifié le 18 janv. 2021 à 15:50

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);

jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650
18 janv. 2021 à 17:24

<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>

nicodak Messages postés 50 Date d'inscription vendredi 21 août 2020 Statut Membre Dernière intervention 2 juin 2021 1 > jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024
25 janv. 2021 à 16:59

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.

jordane45 Messages postés 38144 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 21 avril 2024 4 650 > nicodak Messages postés 50 Date d'inscription vendredi 21 août 2020 Statut Membre Dernière intervention 2 juin 2021
25 janv. 2021 à 17:10

// 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);

Discussions similaires

comment donner les droits sur fichier partage

Chemin Logo du site de la Cité de l'espace

Question PIX

Discussions similaires

Newsletters