Est-il possible d'utiliser des variables en tant qu'éléments dom?

Question

J'ai plusieurs champs de saisie dans un formulaire ayant chacun un nom unique. Par exemple, pour changer la couleur que je ferais:

testForm.username.style.background = "yellow"; 

username étant le nom de l'entrée et testform étant le nom du formulaire

Je veux faire: remplacer username avec une elem variable de sorte que lorsque J'appelle la fonction pour changer la couleur de fond je n'ai pas besoin d'avoir une fonction séparée pour chaque champ unique. Je voudrais juste envoyer le nom elem et cette fonction fonctionnerait pour tous les domaines.

testForm.elem.style.background = "yellow"; 

Mon problème est que cela ne fonctionne pas. Par exemple il a passé le elem dans la fonction bien, mais il dit que testForm.elem.style est null. Pour une raison quelconque, javascript n'aime pas les variables pour les noms d'éléments que je devine?

Answer 1

var elem = 'username'; 
testForm[elem].style.background = 'yellow'; 

Answer 2

Vous devriez faire un eval pour faire quelque chose comme ça, par exemple eval ("testform." + Elem + ".style.background = yellow");

Answer 3

essayer

testForm [elem].style.background = "yellow"; 

ou

var elem = testForm.username 
elem.style.background = "yellow"; 

dans le premier cas elem maintient le nom d'utilisateur, et dans le second cas, elem pointe vers l'élément de DOM réelle.

Answer 4

Une propriété d'un objet JavaScript (dans ce cas, la propriété "username" de l'objet "testform") est accessible en utilisant la syntaxe object.property ou object["property"]. Comme la deuxième forme prend une chaîne (comme indiqué par les guillemets doubles), il s'ensuit qu'une variable contenant une chaîne peut également être utilisée avec cette syntaxe. Par conséquent:

testform[elem].style.background = "yellow";

fera ce que vous voulez.

Answer 5

Il semble que vous créiez une fonction pour ce faire de toute façon. Dans ce cas, pourquoi ne pas simplement utiliser la fonction suivante:

function changeBackgroundOfElementToYellow(element){ 
    element.style.background = "yellow"; 
} 

Et appelez avec:

changeBackgroundofElementToYellow(testForm.username); 

En général, je trouve la méthode RaYell/de kangax affiché déjà mieux, mais cela est une autre option.