jquery - Padding Left and Right Using Core Javascript - Stack Overflow

admin管理员组

文章数量:1341959

I am trying to set padding left and right using javascript using this code but its not working

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

Getting this error

Uncaught TypeError: Cannot set property 'paddingLeft' of undefined

Please help suggest me what I am doing wrong here.

I am trying to set padding left and right using javascript using this code but its not working

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

Getting this error

Uncaught TypeError: Cannot set property 'paddingLeft' of undefined

Please help suggest me what I am doing wrong here.

• javascript
• jquery

Share Follow asked Apr 8, 2013 at 9:30 SoarabhSoarabh 2,96099 gold badges4141 silver badges5757 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 7

getElementsByClassName returns a list of elements, not one element. You need to index into the list to modify an element in it.

Just the first one:

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

All of them:

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

Separately: There's no need to explicitly call toString on paddingOfUl, it'll get done automatically if you try to append a string to a number. So:

...paddingLeft = paddingOfUl + "px";

...is fine.

You need to loop through the elements:

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

document.getElementsByClassName('className') will return an array of elements. Since an array does not have a style property you receive the error.

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

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

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..

本文标签： jqueryPadding Left and Right Using Core JavascriptStack Overflow