javascript Fonction pour charger un fichier JS et CSS dans HTML

Wazz9

Membre
Bonjour tout le monde,

Pour m'exercer à JS je me suis lancé un petit défi: charger les fichier JS et CSS de mon projet via une fonction javascript et pas avec les lignes de code habituelles
HTML
<script src="/js/script.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style.css"/>

Donc le but est de créer une fonction qui s'occupe de charger ces 2 fichiers
JavaScript
function charger_js_css() { //création de la fonction
  var script = document.createElement("script"); // variable js
  script.src = js/script.js;

  var css = document.createElement("css"); // variable css
  css.src = css/style.css;

  document.head.appendChild(script); // écriture des liens dans les balises <head>
  document.head.append(css);
}

Bon en l'état ça ne fonctionne pas, je pense que je déclare mal les URL de localisation des fichiers JS et CSS mais je ne trouve pas le problème. Ou alors c'est autre chose mais je coince. Des idées ?
 

Eleven Up

Membre
Une variante qui pourrait aider
JavaScript
var sc = document.createElement("script");
sc.setAttribute("src", "https://getfirebug.com/firebug-lite.js");
sc.setAttribute("type", "text/javascript");
document.head.appendChild(sc);

Par contre je comprends pas bien l'utilisation de document.head.appendChild qui à priori charge le script dans les balises <head> ce qui n'est pas recommandé, si ?
 

Wazz9

Membre
Salut Wazz, j'essaierai déjà de mettre des guillemets
Oui c'est pas idiot. Et du coup ça fonctionne... pas plus !
J'ai réduit le code à CSS pour y voir plus claire mais la page HTML s'affiche sans mise en forme

HTML
<!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_js_css() {
        var css = document.createElement("css");
        css.src = "test.css";

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

Qu'est-ce qui cloche ? Le JS ou l'implantation dans HTML ?
 
Dernière édition:

Eleven Up

Membre
Non ça charge l'adresse du fichier JS, pas vraiment un script.
Pas faux,
Mais alors le script qui charge le fichier est placé en fin de code html juste avant la balise </body>, donc il est lu en dernier, donc le navigateur exécute le script en dernier et donc le fichier CSS est chargé en dernier ce qui a pour effet de charger uniquement le HTML à l'ouverture de la page. Bizarre comme méthode non ?
 

Cascadeur

Membre
Bon en l'état ça ne fonctionne pas, je pense que je déclare mal les URL de localisation des fichiers JS et CSS mais je ne trouve pas le problème. Ou alors c'est autre chose mais je coince. Des idées ?
Essaye ceci et tiens nous au courant :)
JavaScript
var link = document.createElement('link'); 
    link.rel = 'stylesheet'; 
    link.type = 'text/css';
    link.href = 'test.css';

document.getElementsByTagName('HEAD')[0].appendChild(link);

Il est où notre Wazz9 ?
 

Ces discussions pourraient vous intéresser...

Bonjour à tous, J'essaie de déployer une application sur mon serveur live via Docker mais j'ai du faire une mauvaise configuration car l'application s'est installé en local. Il y a un fichier à configurer : docker-compose.yml notamment cette section server: image...
Bonsoir, j'ai fait une recherche sur le forum et je crois que personne n'en a encore parlé, j'ai trouvé un site pas mal lorsque j'ai installé easyPHP (qui est maintenant Webserver) : KodeShot. Cela permet de créer des captures d'écrans d'extrait de code. Vous tapez votre code, vous...
Hello, J'ai créé un formulaire avec Bootstrap mais j'ai un problème de mise en forme. Les <input> prennent chacun leur propre ligne alors que j'aimerais que certains soit côte à côte. Je ne parviens pas du tout à faire ce que je veux et je ne trouve rien dans la documentation...
Haut