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

Version imprimable

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:

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...

03/12/2007, 15h51
le_chomeur

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 :

Citation:

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 ;)

Va pour un bout de code :)
Code:

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:

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 :(

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:

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 ... )

03/12/2007, 17h30
SpaceFrog
Code:

1 2 node.id="text"; node.class="text";
ceci étant tu insères un seul node ?

Merci pour vos réponses

Citation:

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">)
Citation:
Envoyé par le_chomeur
pour le node.data c'est bizare exemple super simple :
Code:

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...

04/12/2007, 09h26
lescarphe
Citation:
Envoyé par SpaceFrog

Code:

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)...
04/12/2007, 10h28
SpaceFrog

Citation:

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

oui la compatibilité entre les browser ...

essaye de doubler l'attribution du style
avec un truc du genre

Code:

document.getElementById('idduNode').className='text'

après le appendChild ...

Citation:

Envoyé par SpaceFrog

oui la compatibilité entre les browser ...

essaye de doubler l'attribution du style
avec un truc du genre

Code:

document.getElementById('idduNode').className='text'

après le appendChild ...

j'ai déjà essayé :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 (...) articleNode.appendChild(node); formNode.parentNode.replaceChild( articleNode, formNode ); //les attributs class ne sont pas identifiés comme tels (getAttribute('class')!=className) var listNodes = articleNode.getElementsByTagName('*'); for ( var i=0; i<listNodes.length; i++ ) { if (listNodes[i].nodeName=="span") { listNodes[i].className = "essai"; listNodes[i].setAttribute("class", "essai"); } }
... et ça ne marche pas mieux. :(
notez que lorsque je parcours les noeuds span et que j'affiche leur className, je peux vérifier que l'attribut existe bien ; simplement le style correspondant n'est pas appliqué... c'set à n'y rien comprendre.

Code:

1
2
3
4
for ( var i=0; i<listNodes.length; i++ ) {
		if (listNodes[i].nodeName.toLowerCase()=="span") {
			listNodes[i].className = "essai"; 
		}

Code:

1
2
3
4
5
6
7
8
9
10
 
	var listNodes = articleNode.getElementsByTagName('*');
	for ( var i=0; i<listNodes.length; i++ ) {
		if (listNodes[i].nodeName.toLowerCase()=="span") {
alert('1-'+listNodes[i].className+'/'+listNodes[i].getAttribute("class"))
			listNodes[i].class = "essai"; 
			listNodes[i].className = "essai"; //listNodes[i].getAttribute("class");
			listNodes[i].setAttribute("class", "essai");
alert('2-'+listNodes[i].className+'/'+listNodes[i].getAttribute("class"))
	}

en résultat, lors du premier affichage, j'ai par exemple : 1-undefined/section (comme je le disais, le className n'est pas initialisé, malgré la présence d'un attribut classe dans mon XML original), puis 2-essai/essai. Donc cette boucle force bien l'instanciation du className à essai ; pour autant la règle css span.essai n'est pas appliqué. (la règle span quant à elle l'est bien...)

voilà ce que fait la fonction applyXSL (c'est elle qui genere le documentFragment sur lequel je travaille) :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
	function applyXSL( xml, xsl ){
		try { 
			// navigateur basé sur Gecko
			if (window.XSLTProcessor) {
				var xsltProcessor = new XSLTProcessor();
 
				xsltProcessor.importStylesheet(xsl);
				var fragment = xsltProcessor.transformToFragment(xml, document);
				//var fragment = xsltProcessor.transformToDocument(xml);
				//var fragment = fragment.firstChild;
			// ActiveX pour Internet Explorer
			} else if (window.ActiveXObject) {
				fragment = xml.transformNode(xsl);
			}
 
			return fragment;
		} catch (e) {
			return e;
		}
	}