Ajouter un fichier CSS à un DOM

Version imprimable

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:

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:

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,

16/11/2022, 15h42
mathieu

avez-vous essayé avec "appendChild" ?
16/11/2022, 15h56
rep42

1 pièce(s) jointe(s)

appendChild testé

Bonjour,

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

Citation:

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

Le DOM ressemble alors à la pièce jointe.

Merci,
Cordialement,

J'ai trouvé une solution

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:

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,

16/11/2022, 16h34
mathieu

qu'utilisez vous pour générer l'objet "xmldocument" et pour récupérer ensuite le résultat ?
16/11/2022, 16h42
rep42

récupération document

Salut,

J'utilise:

Code:

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

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

Cordialement,
16/11/2022, 18h03
NoSmoking
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:

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

rep

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:

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:

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,