[DOM] Styles ignorés après un import dans le dom

**lescarphe** · 03/12/2007, 15h15

Bonjour à tous,

voilà mon problême :
j'essaye d'insérer un fragment dom dans mon document, mais les styles du document identifié par une classe ne sont pas appliqués à ce bout de code ajouté...

Code :

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

1
2
3
4
5
6
7
 
(...)
var fragment = xsltProcessor.transformToFragment(xml, document);
var node = document.createElement('div');
node.appendChild( fragment);
formNode.parentNode.replaceChild( node , formNode );
(...)

Le style n'est pas pris en compte ;
debug :
- si je crée un noeud "fragment" de toute pièce, les styles sont correctement appliqués. Si j'insère un bout de code en innerHTML, ça marche aussi. (au fait, y a t il un moyen simple de convertir un noeud dom en texte ?)
- si je récupère un document plutôt qu'un fragment, que je récupère la racine de ce document et que je l'insère, ça ne marche pas non plus.
- j'ai essayé de refaire explicitement un import : document.importNode(fragment, true); ou de prendre le noeud racine de mon fragment, mais sans succès.
- il semblerait que seuls les styles identifiés par la classe ne soient pas appliqués. par exemple le style css span{} est appliqué mais pas le style span.classe{} ; en vérifiant que mon fragment contient bien les attributs de classe, je m'aperçois : qu'un getAttribute('class') me renvoie bien la classe, mais qu'un className me retourne undefined... le problême viendrait peut-être de là... ceci dit, même en affectant explicitement la classe à node.className, les styles de classe sont ignorés...

je suis à cours d'idée, là...

merci, en tout cas, à tous ceux qui voudront bien jeter un coup d'oeil...

**le_chomeur** · 03/12/2007, 16h51

question bète, as tu testé sous IE et Firefox ?
car si tes classes dépendent d'un id ou autre il pourrais il y avoir des problèmes ...
sinon pour :

au fait, y a t il un moyen simple de convertir un noeud dom en texte ?

essaye avec : tonNoeud.data
si tu pouvais nous mettre un petit exemple de ton doc xml et ta page html et ton css

**lescarphe** · 03/12/2007, 17h53

Va pour un bout de code

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
	var xsl = loadXML('/views/xslt/pi_teiToHtml.xslt');
	var parser = new DOMParser();
	text = '<'+'?xml version="1.0" encoding="iso-8859-1"?><tei.2 xmlns="http://www.tei-c.org/ns/1.0"><text><body>'+text+'</body></text></tei.2>';
	var xml = parser.parseFromString( text, "text/xml" );
	var bodyNode = applyXSL( xml, xsl ); // note : retourne un documentFragment
	// je n'arrive pas à afficher le fragment retourné, mais en parcourant les noeuds, je peux afficher l'attribut "class", 
	// et vérifier que j'ai bien un <span class="body"> par exemple
	var node = document.createElement('div');
	node.setAttribute("id", "text");
	node.setAttribute("class", "text");
	node.appendChild( bodyNode );
	articleNode.appendChild(node);
	formNode.parentNode.replaceChild( articleNode, formNode );

et le css :

Code :

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

1
2
3
4
5
6
7
8
9
 
.text span {
	display:block;
	border:1px red solid;
}
.text span.body {
	display:block;
	border:1px blue solid;
}

Avec la première instruction, les span s'affiche encadré en rouge ; avec la seconde, mon <span class="body"> n'est jamais bleu.
Vu les tests que j'ai fait, je suis à peu près certain que ça vient d'une non reconnaissance des attributs class dans un bout de xml importé (lorsque je construit directement le code dans mon document, ça marche) ; de plus, le code importé comporte bien les balises avec l'attribut classe (test de getAttribute sur les noeuds de bodyNode).

Quant au node.data, sous firefox, il est undefined

**le_chomeur** · 03/12/2007, 18h04

hum , je crois qu'il y a un souçis , tu importes un document complet , donc tu vas te retrouver avec 2 body dans ta pages ...
( pas sur a 100% je testerais ce soir )

pour le node.data c'est bizare exemple super simple :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<html>
<head>
<title>Test node.data</title>
<script type="text/javascript">
function test() {
 alert(document.getElementById("contenu").firstChild.data);
}
//-->
</script>
</head><body id="contenu" onload="test()">
un peu de texte pour tester
</body>
</html>

qui devrait marcher ( fais en live ... )

**SpaceFrog** · 03/12/2007, 18h30

Code :

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

1
2
node.id="text";
node.class="text";

ceci étant tu insères un seul node ?

**lescarphe** · 04/12/2007, 10h26

Envoyé par SpaceFrog

Code :

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

1
2
node.id="text";
node.class="text";

ceci étant tu insères un seul node ?

Y a t-il une raison particulière d'utiliser ce type de notation plutôt qu'un setAttribute ?

Sinon, j'insère mon fragment (documentFragment) dans un noeud div (node), lui même encapsulé dans un autre noeud div (articleNode)...

**lescarphe** · 04/12/2007, 10h19

Merci pour vos réponses

Envoyé par le_chomeur

hum , je crois qu'il y a un souçis , tu importes un document complet , donc tu vas te retrouver avec 2 body dans ta pages ...
( pas sur a 100% je testerais ce soir )

Non, non, en fait c'est un span qui a pour class "body" (lors de ma conversion d'un XML TEI en HTML : les balises spécifiques de TEI sont converties en <span class="nom_de_la_balise">)

Envoyé par le_chomeur

pour le node.data c'est bizare exemple super simple :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<html>
<head>
<title>Test node.data</title>
<script type="text/javascript">
function test() {
 alert(document.getElementById("contenu").firstChild.data);
}
//-->
</script>
</head><body id="contenu" onload="test()">
un peu de texte pour tester
</body>
</html>

qui devrait marcher ( fais en live ... )

en effet, ton exemple marche : data affiche bien le contenu d'un noeud texte. mais alert(document.getElementById("contenu").data); n'affichera pas "<body id="contenu" onload="test()">un peu de texte pour tester</body>", ce que je cherche à faire...

[DOM] Styles ignorés après un import dans le dom

JavaScript

Vue hybride

Discussions similaires

Partager

Partager