Modifier CSS d'un tag

Bonjour, voici mon problème :

Code:

---

1 2 3 4 5

.fieldset label { margin: 3px 3px 0 0; /* margin 3 au lieu de 5*/ }   select { margin-bottom: 3px}

---

Voilà , je voudrai modifier ces 2 styles en js.. Pour le select j'ai fait :

Code:

---

document.getElementsByTagName('select').style.marginBottom = "3px";

---

mais sans résultat. une idée ?

Pour autant que les noms ont un sens, le 's' de getElementsByTagName() indique clairement que cette méthode renvoie une collection d'éléments. Or la propriété style existe pour un élément, pas pour une collection !

Il te faut boucler sur tous les éléments de ta collection.

Oui en effet, et comment dois-je faire ? Je sais qu'il n'existe pas de getElementByTagName. Et je n'ai pas d'id ^^

qui dit collection dit indexe

Code:

---

document.getElementsByTagName('select')[0].style.marginBottom = "3px";

---

pour le premier élement de la collection

ça marche nikel pour le select :ccool: . Par contre je n'ai pas réussi à trouver pour :

Code:

---

1 2 3

.fieldset label { margin: 5px 3px 0 0; /* margin 3 au lieu de 5*/ }

---

Je voudrai modifier le 5px en 3px. Vraiment du mal avec modification de style :?

top right bottom left

=> marginTop

Code:

---

document.getElementsByClassName('.fieldset')[0].getElementsByTagName('label')[0].style.marginTop = "3px";

---

ou sinon

Code:

---

document.querySelectorAll('.fieldset label')[0].style.marginTop = "3px";

---

mais c'est pas valable pour les navigateurs trop anciens

Oui ça je savais c'est plutôt la syntaxe que je n'arrive pas à établir...

Code:

---

document.getElementsByClassName('fieldset')[0]

---

pour récupere la class fiedlset, maintenant je cherche à trouver tous les "label" de cette classe et d'en modifier le css

ben tous... c'est pas que le [0] ...

=> boucle

Oui mais je veux modifier le margin de tout les <label> contenu dans 1 ([0]) Fieldset ^^, comme il est indiqué dans le css :)

La collection est donc :

Code:

---

1 2	getElementsByTagName('fieldset') [indexe].getElementsByTagName('select')

---

En suivant tes instructions ^^ , j'arrive à ça :

Code:

---

document.getElementsByClassName('fieldset')[0].getElementsByTagName('label')["*"].style.marginTop = "3px";

---

Mais il semblerait qu'il y ait une erreur de syntaxe mais je ne vois pas laquelle :?

Code:

---

getElementsByTagName('label')["*"]

---

:nono:
BOUCLE

Citation:

---

Envoyé par lerorodu51

En suivant tes instructions ^^ , j'arrive à ça :

Code:

---

document.getElementsByClassName('fieldset')[0].getElementsByTagName('label')["*"].style.marginTop = "3px";

---

Mais il semblerait qu'il y ait une erreur de syntaxe mais je ne vois pas laquelle :?

---

la collection renvoyé est un array javascript d'éléments, et un "*" n'existe pas sur les array javascript, tu dois faire :

Code:

---

document.getElementsByClassName('fieldset')[0].getElementsByTagName('label')[0].style.marginTop = "3px";

---

si tu veux modifier un seul élément (le premier) sinon tu dois boucler :

Code:

---

1 2 3 4

var collectionLabel = document.getElementsByClassName('fieldset')[0].getElementsByTagName('label'); for(var i=0;i<collectionLabel.length;i++){ collectionLabel[i].style.marginTop = "3px"; }

---

De même, si tu veux parcourir tous les label de tous les fieldset, tu peux utiliser des boucles imbriquées selon le même principe.

Merci c'est nikel , maintenant getDocumentByClassName n'existe pas sous ie8...Cela ne m'étonne pas

oups, j'avais pas fait attention, j'avais juste corrigé ton code sans faire attention à classeName (je pensais que je manipulais un TagName).

la solution propre est alors :

Code:

---

1 2 3 4 5 6

var collectionLabel = document.getElementsByTagName('label'); for(var i=0;i<collectionLabel.length;i++){ if(collectionLabel[i].parentNode.className.indexOf('fieldset')+1){ collectionLabel[i].style.marginTop = "3px"; } }

---

;)

en 2009 ;)
http://www.developpez.net/forums/d75...filtre-regexp/

sinon, encore une autre solution si tu es plus à l'aise avec le css:

Code:

---

1 2 3 4 5 6 7 8

function addStyle(css) { var style = document.createElement('style'); style.type = 'text/css'; style.innerHTML = css; // style.textContent document.getElementsByTagName('head')[0].appendChild(style); return style; } addStyle(".fieldset label{margin:3px 3px 0 0;} select {margin-bottom:3px}");

---

;)