javascript - コア Javascript を使用した左右のパディング

Question

このコードを使用してJavaScriptを使用して左右にパディングを設定しようとしていますが、機能しません

document.getElementsByClassName('className').style.paddingLeft = paddingOfUl.toString()+"px" ;

このエラーの取得

キャッチされていない TypeError: 未定義のプロパティ 'paddingLeft' を設定できません

ここで私が間違っていることを教えてください。

Answer 1

getElementsByClassName1 つの要素ではなく、要素のリストを返します。リスト内の要素を変更するには、リストにインデックスを付ける必要があります。

最初のものだけ：

document.getElementsByClassName('className')[0].style.paddingLeft = paddingOfUl.toString()+"px" ;
// Change here -----------------------------^^^

それらのすべて:

var list = document.getElementsByClassName('className');
var i;
var padding = paddingOfUl.toString()+"px";
for (i = 0; i < list.length; ++i) {
    list[i].style.paddingLeft = padding;
}

個別に: toStringonを明示的に呼び出す必要はありませんpaddingOfUl。数値に文字列を追加しようとすると、自動的に実行されます。そう：

...paddingLeft = paddingOfUl + "px";

...結構です。

Answer 2

要素をループする必要があります。

var elements = document.getElementsByClassName('className');
for (var i = 0; i < elements.length; i++) {
    elements[i].style.paddingLeft = paddingOfUl.toString()+"px";
}

Answer 3

document.getElementsByClassName('className')要素の配列を返します。配列にはスタイル プロパティがないため、エラーが発生します。

コードは、配列によって返された要素を反復処理する必要があります。

var elements = document.getElementsByClassName('className');

for(var i = 0; i < elements.length; i++){
   elements[i].style.paddingLeft = paddingOfUl.toString() + "px";
}

Answer 4

var elements = document.getElementsByClassName('className');
// the above returns an Array-Like structure with a length property.

for (var i = 0, len = elements.length; i < len; i++) {
    elements[i].style.paddingLeft = "10px";
};

Answer 5

次のように、JavaScript を使用して任意の要素のスタイルを変更できます。

document.getElementById("nameofelement").style.paddingLeft="10px";

paddingLeftの代わりに、background="color"やcolor="grren"なども使用できます。