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

5 Answers 5

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