Acc�s au css depuis javascript

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:

---

<div id="viewer">

---

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

Code:

---

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:

---

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:

---

<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

a quoi �a sert �a ?

Code:

---

while(p.style != undefined){

---

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:

---

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.

Citation:

---

A chaque fois je r�cup�re le conteneur parent

---

tu es dans une boucle ?

tu ne nous montre pas le code entier ?

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

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.

heu un if tout court au lieu du while non?

il faut forcement boucler pour remonter tous les �l�ments parents non ? :)

encore faudrait il tester que le parent existe ?

Tu peux passer par du JQ peut-etre ?

Code:

---

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

---

pour voir si sa marche comme cela

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:

---

1 2 3 4 5

while(p){ offsetTop += p.offsetTop?p.offsetTop:0; offsetLeft += p.offsetLeft?p.offsetLeft:0; p = p.parentNode; }

---

Citation:

---

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.

Citation:

---

Envoy� par Watilin

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" ? :mouarf:

Citation:

---

Envoy� par Bovino

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


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

Citation:

---

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

Citation:

---

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

Citation:

---

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

---

Voil� exactement :)

Citation:

---

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.

Citation:

---

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

Citation:

---

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

Citation:

---

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

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