Discussion :

[LanfeustXIII]

Bonjour,

J'aimerais calculer la taille des marges autour d'un de mes objets html.
Mon objet est déclaré de cette manière dans mon fichier html :

Code :

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

<div id="viewer">

Le code css est situé dans une feuille de style à part :

Code :

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

1
2
3
4
5
6
7
#viewer
{
	width : 100%;
	height : 100%;
	margin-left : 300px;
	margin-right : 0px;
}

Au sein de mon fichier javascript j'effectue la boucle suivante afin de calculer la somme des marges des objets contenant mon objet viewer (seul mon objet viewer possède une marge dans le cas actuel) :

Code :

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

1
2
3
4
5
6
7
8
var offsetTop = 0;
var offsetLeft = 0;
var p = document.getElementById('viewer');			
while(p.style != undefined){
   offsetTop += p.style.marginTop;
   offsetLeft += p.style.marginLeft;
   p = p.parentNode;
}

A la suite de cela, offsetLeft devrait contenir 300. Hors il ne contient rien. La valeur de p.style.marginLeft de mon objet viewer a pour valeur "undefined" quand je l'affiche dans la console.

Par contre si je place le css dans le fichier html comme suit, tout marche bien :

Code :

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

<div id="viewer" style="width:100%;height:100%;margin-left:300px;margin-right:0px"></div>

Pourquoi ne puis-je pas accèder au css si il se trouve dans une feuille de style externe au html ?

Merci de vos réponses

Cordialement

David

[SpaceFrog]

a quoi ça sert ça ?

Code :

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

while(p.style != undefined){

[LanfeustXIII]

A chaque fois je récupère le conteneur parent afin de vérifier si celui-ci a une valeur différente de zéro dans ses propriétés marges. J'utilise :

Code :

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

while(p.style != undefined){

afin de vérifier s'il existe encore un objet père. Si la propriété style existe alors c'est un objet html (document, page, div etc..). Sinon si la propriété n'existe pas alors cela veut dire que l'on est remonté trop haut, on a donc atteint le dernier conteneur (document), on s'arrête alors.

[SpaceFrog]

A chaque fois je récupère le conteneur parent

tu es dans une boucle ?

tu ne nous montre pas le code entier ?

[Watilin]

Moi je trouve que ça ressemble à de l'attente active... Boucler pour attendre quelque chose n'est pas une bonne façon de faire en JS, en général.

https://developer.mozilla.org/en/DOM...tComputedStyle

[LanfeustXIII]

Excusé moi mais j'ai du mal à vous suivre ^^ ....
Où voyez vous de l'attente ? ^^

Je n'attends jamais, à partir d'un div donné, je vérifie si se div a une marge, si oui j'enregistre sa valeur. Une fois cela fait je récupère le div parent, (soit le div qui contient notre premier div) Je vérifie alors si il possède une marge .. etc

Jusqu'à arriver au conteneur le plus haut dans la hiérarchie, soit document sauf erreur.
Afin de savoir si p.parentNode n'est pas null (en d'autre mot savoir si p est contenu par un autre élément html et donc que je n'ai pas encore atteint le conteneur le plus haut dans la hiérarchie) j'accède à une propriété du conteneur afin de savoir si elle existe. Si c'est le cas cela signifie que l'élément parent existe. J'ai choisi style, mais j'aurais pu choisir autre chose. Si la propriété existe c'est que j'ai bien récupéré un élément html.
J'avais trouvé cette exemple sur internet, cela fonctionne bien.

[SpaceFrog]

heu un if tout court au lieu du while non?

[LanfeustXIII]

il faut forcement boucler pour remonter tous les éléments parents non ?

[SpaceFrog]

encore faudrait il tester que le parent existe ?

[L0rD59]

Tu peux passer par du JQ peut-etre ?

Code :

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

$("#selecteur").css('margin-left');

pour voir si sa marche comme cela

[Willpower]

Tu n'as pas accès au contenu des définitions css, mais tu peux par contre récupérer des informations de tes dom-objects comme l'offset(left ou top) :

Code :

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

1
2
3
4
5
while(p){
	offsetTop += p.offsetTop?p.offsetTop:0;
	offsetLeft += p.offsetLeft?p.offsetLeft:0;
	p = p.parentNode;
}

[Bovino]

Tu n'as pas accès au contenu des définitions css

Si, c'est possible via la collection cssRules.
Ceci dit, c'est assez compliqué à maitriser (donc très peu utilisé et peu connu) et offre un intérêt assez limité comparé à getComputedStyle ou currentStyle.

[Invité]

Moi je trouve que ça ressemble à de l'attente active...

Je ne savais même pas que ça existait !
Ca veut dire "aller se chercher une bière pendant les pubs, en attendant que le film recommence" ?

[Willpower]

Si, c'est possible via la collection cssRules.
Ceci dit, c'est assez compliqué à maitriser (donc très peu utilisé et peu connu) et offre un intérêt assez limité comparé à getComputedStyle ou currentStyle.

Je ne connaissais aucun des 3, comme quoi, j'en apprend encore tous les jours.


Sinon effectivement, la boucle de LanfeustXIII avait du sens, et servait à remonter les éléments du DOM. (et non pas à vérifier si l'objet avait du style ou encore moins à "attendre" qu'il en ait^^)

[SpaceFrog]

Sinon effectivement, la boucle de LanfeustXIII avait du sens, et servait à remonter les éléments du DOM. (et non pas à vérifier si l'objet avait du style ou encore moins à "attendre" qu'il en ait^^)

Donc il eut fallu faire la boucle sur le teste d'existence du parent et pas sur le style ...

[LanfeustXIII]

Tu peux passer par du JQ peut-etre ?

Peut être est ce une bonne idée, je ne connaissais pas cette possibilité il faut que j'essaie merci

Sinon effectivement, la boucle de LanfeustXIII avait du sens, et servait à remonter les éléments du DOM.

Voilà exactement

Donc il eut fallu faire la boucle sur le teste d'existence du parent et pas sur le style ...

Oui en effet la vérification que j'effectue est sans doute ambiguë je l'admet.

Ceci dit, c'est assez compliqué à maitriser (donc très peu utilisé et peu connu) et offre un intérêt assez limité comparé à getComputedStyle ou currentStyle.

Voila la solution à mon problème : getComputedStyle
Merci , ça marche très bien pour récupérer les données css contenues dans une feuille de style

[SpaceFrog]

Voila la solution à mon problème : getComputedStyle
Merci , ça marche très bien pour récupérer les données css contenues dans une feuille de style

Attention à la confusion !!
getComputedStyle récupère le style affiché !!
Si il y a eu modification dynamique, le style dans la feuille de style peut être différent !!

[LanfeustXIII]

Attention à la confusion !!
getComputedStyle récupère le style affiché !!
Si il y a eu modification dynamique, le style dans la feuille de style peut être différent !!

Ah, je ne savais pas ça mais je ne pense pas que ça ait d'impact défavorable dans mon cas, au contraire, sauf erreur

[Watilin]

Mea culpa (et trois ans plus tard ^^), je n'avais pas vu le p = p.parentNode;, du coup ça n'a rien à voir avec de l'attente active.

Pour les curieux, l'attente active c'est justement basé sur une boucle while, en gros on tourne dans le vide en attendant que la situation évolue. C'est souvent considéré comme maladroit car ça monopolise le processeur... http://fr.wikipedia.org/wiki/Attente_active