Charger le fichier CSS via fonction JS
Résolu
nicodak
Messages postés
51
Statut
Membre
-
jordane45 Messages postés 30426 Date d'inscription Statut Modérateur Dernière intervention -
jordane45 Messages postés 30426 Date d'inscription Statut Modérateur Dernière intervention -
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.
Y voyez-vous l'erreur ?
Merci !
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
2 réponses
-
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';
-
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);
-
<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>- 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. // 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);
-
