javascript - 使用核心 Javascript 向左和向右填充

Question

我正在尝试使用此代码使用javascript设置左右填充，但它不起作用

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

收到此错误

未捕获的类型错误：无法设置未定义的属性“paddingLeft”

请帮助建议我在这里做错了什么。

Answer 1

getElementsByClassName返回一个元素列表，而不是一个元素。您需要对列表进行索引以修改其中的元素。

只是第一个：

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')将返回一个元素数组。由于数组没有样式属性，您会收到错误。

The code should iterate over the elements returned by the array.

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

You can change style of any element using javascript as follow:

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

instead of paddingLeft you can also use background="color" or color="grren" etc..