dom要素として変数を使用することはできますか？

Question

私は一意の名前を持つフォームに複数の入力フィールドを持っています。たとえば、色を変更するために私がするだろう。そうする場合、その変数elemとusernameを置き換える：

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

usernameは

が、私はこれをしたいフォーム名が入力されの名前とtestformています私は背景色を変更する関数を呼び出します。私はすべての固有のフィールドに対して別々の関数を持つ必要はありません。私はちょうどelemの名前を送信し、その機能はすべてのフィールドで機能するだろう。

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

私の問題は動作しません。たとえば、elemを関数fineに渡しましたが、testForm.elem.styleはnullとなります。何らかの理由で、javascriptは私が推測している要素名の変数を好きではありませんか？

Answer 1

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

Answer 2

eval（ "testform。" + elem + ".style.background = yellow"）などのようなことをするには、evalを実行する必要があります。

Answer 3

は、最初のケースで

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

又は

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

を試みるelemユーザ名を保持し、実際のDOMエレメントへの第2の場合には、elemポイント。

Answer 4

object.propertyまたはobject["property"]の構文を使用して、JavaScriptオブジェクトのプロパティ（この場合は "testform"オブジェクトの "username"プロパティ）にアクセスできます。 2番目の形式では文字列（二重引用符で示す）が使用されるため、文字列を含む変数もその構文で使用できます。したがって：

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

あなたが望むことを行います。

Answer 5

とにかくこれを行う機能を作成しているようです。その場合には、その理由だけで、次の機能は使用しない：

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

をし、それを呼び出します。一般的には

changeBackgroundofElementToYellow(testForm.username); 

私はRaYell/kangax方法が優れていることが既に掲載見つけるが、これは別ですオプション。