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.

[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" ?