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