Question

我正在尝试使用此代码使用javascript左右填充，但它无法正常工作

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

获取此错误

未捕获的TypeError：无法设置未定义的属性“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;
}

另外：没有必要在toString上明确调用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”等。

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

5 个答案: