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