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

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

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, 15h51

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, 16h53

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, 17h04

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, 17h30

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, 09h19

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

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

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

**SpaceFrog** · 04/12/2007, 10h28

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 :

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

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

après le appendChild ...

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

Envoyé par SpaceFrog

oui la compatibilité entre les browser ...

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

Code :

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

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

après le appendChild ...

j'ai déjà essayé :

Code :

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

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.

**SpaceFrog** · 04/12/2007, 11h38

Code :

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

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

**lescarphe** · 04/12/2007, 12h44

Code :

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

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 :

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

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

JavaScript

Discussions similaires

Partager

Partager