Discussion :

[lerorodu51]

Bonjour, voici mon problème :

Code :

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

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 :

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

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

mais sans résultat. une idée ?

[Bovino]

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.

[lerorodu51]

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

[SpaceFrog]

qui dit collection dit indexe

Code :

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

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

pour le premier élement de la collection

[lerorodu51]

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

Code :

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

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

[SpaceFrog]

top right bottom left

=> marginTop

[Bovino]

Code :

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

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

ou sinon

Code :

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

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

mais c'est pas valable pour les navigateurs trop anciens

[lerorodu51]

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

Code :

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

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

[SpaceFrog]

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

=> boucle

[lerorodu51]

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

[SpaceFrog]

La collection est donc :

Code :

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

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

[lerorodu51]

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

Code :

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

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

[SpaceFrog]

Code :

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

getElementsByTagName('label')["*"]

BOUCLE

[Willpower]

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

Code :

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

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 :

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

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 :

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

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.

[lerorodu51]

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

[Willpower]

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 :

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

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";
    }
}

[SpaceFrog]

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

[Willpower]

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

Code :

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

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}");