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,