Ajouter un fichier CSS à un DOM

**rep42** · 16/11/2022, 15h24

Bonjour,

Je suis en train de faire une application avec les caractéristiques suivantes:
- page statique
- pas de serveur (donc pas de PHP, AJAX)

Le but de mon application est de sortir au format texte une page web.
J'ai créé un DOM autre que celui de la page active.

Je voudrais rajouter un fichier CSS à ce DOM.

J'ai codé un addCharset qui fonctionne:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
function addCharset(dest, text)
{
    sendInfo("addCharset");
 
    let obj = doc.createElement("meta");
    obj.setAttribute("charset", text);
 
    dest.appendChild(obj);
}

Je voudrais faire la même chose avec un CSS:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
function addCSS(dest, text)
{
    logger("addCSS");
    logger(dest); // dest est un XMLDocument
    logger(text); // text est style.css
 
    let obj = dest.createElement("link");
    obj.setAttribute("rel", "stylesheet");
    obj.setAttribute("href", text);
    logger(obj);
 
    ********************
}

Que dois-je mettre à la place des '*' pour que ça fonctionne ?

Merci,
Cordialement,

**mathieu** · 16/11/2022, 15h42

avez-vous essayé avec "appendChild" ?

**rep42** · 16/11/2022, 15h56

Bonjour,

Oui, lorsque je met appendChild, j'ai l'erreur suivante:

Uncaught DOMException: Node.appendChild: Cannot have more than one Element child of a Document.

Le DOM ressemble alors à la pièce jointe.

Merci,
Cordialement,

**rep42** · 16/11/2022, 16h20

Salut,

Merci de m'avoir mis sur la piste de l'appendChild. Je l'avais essayé, mais comme il ne marchait pas, j'avais essayé plein d'autres trucs.
Mais en revenant sur l'appendChild, j'ai fini par trouver...
Pour l'instant, c'est pas très joli, mais je vais essayer d'améliorer.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
function addCSS(dest, text)
{
    sendInfo("addCSS");
    logger(dest); // dest est un XMLDocument
    sendInfo(text); // text est style.css
 
    let obj = dest.createElement("link");
    obj.setAttribute("rel", "stylesheet");
    obj.setAttribute("href", text);
    // sendObj(obj);
 
    dest.childNodes[0].childNodes[0].appendChild(obj);
}

Le premier 'childNodes[0]' est la balise 'html'.
Le deuxième 'childNodes[0]' est la balise 'head'.

Avant, c'est comme si je voulais ajouter une deuxième balise 'html'.

Ce qui est étonnant, c'est que je n'avais pas le problème avec le charset, ça m'a mis sur une mauvaise piste...

Merci encore,
Cordialement,

**mathieu** · 16/11/2022, 16h34

qu'utilisez vous pour générer l'objet "xmldocument" et pour récupérer ensuite le résultat ?

**rep42** · 16/11/2022, 16h42

Salut,

J'utilise:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

doc = document.implementation.createDocument(null, lang, null);

et c'est ce 'doc' que j'utilise comme paramètre à addCSS.

Cordialement,

**NoSmoking** · 16/11/2022, 18h03

Bonjour,
tu peux aussi faire cela simplement en créant une balise <style> que tu renseignes avec le code de ton CSS via un textContent et tu ajoutes celle-ci au <head> du document.

En gros :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
const oStyle = document.createElement("STYLE");
oStyle.textContent = tonTextCSS;
document.querySelector("head").appendChild(oStyle);

**rep42** · 16/11/2022, 20h18

Salut,

A cette étape, je ne connais pas le contenu du fichier CSS.
Je ne peux donc remplir la balise style...

Mais j'ai quand même utilisé une partie de ta réponse.

Merci.

Finalement, j'ai fait comme ça:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function addCSS(doc, dest, filename)
{
    sendInfo("addCSS");
    logger(doc); // doc est un XMLDocument
    logger(dest); // dest est un l'élément destinataire
    logger(filename); // filename est "style.css"
 
    let obj = doc.createElement("link");
    obj.setAttribute("rel", "stylesheet");
    obj.setAttribute("href", filename);
    // sendObj(obj);
 
    dest.appendChild(obj);
}

Et ça pas testé:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function addHeadCSS(doc, filename)
{
    sendInfo("addHeadCSS");
    logger(doc); // doc est un XMLDocument
    logger(filename); // filename est "style.css"
 
    addCSS(doc, doc.querySelector("head"), filename);
}
 
function addStyle(doc, dest, text)
{
    sendInfo("addStyle");
    logger(doc); // doc est un XMLDocument
    logger(dest); // dest est un l'élément destinataire
    logger(text); // text est style.css
 
    let obj = doc.createElement("style");
    obj.textContent = text;
    // sendObj(obj);
 
    dest.appendChild(obj);
}

Cordialement,

Ajouter un fichier CSS à un DOM

JavaScript

Discussions similaires

Partager

Partager