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

另外:无需在 paddingOfUl 上显式调用 toString，如果您尝试将字符串附加到数字，它会自动完成。所以:

...paddingLeft = paddingOfUl + "px";

...很好。