How to write css code in javascript? (Uncaught TypeError: Cannot set property “height” of undefined)

Tags: javascript,css

Problem :

How to write css code in javascript? (Uncaught TypeError: Cannot set property "height" of undefined)

javascript

document.getElementById("slideshow").getElementsByClassName("arrow").style.height = "86px";

css

#slideshow .arrow{
    height:86px;
    width:60px;
    position:absolute;
    background:url('arrows.png') no-repeat;
    top:50%;
    margin-top: -43px;
    cursor: pointer;
    z-index: 5000;
}

---

Solution :

The key here is the pluralisation of getElementsByClassName - elements. This method returns an array-like object of elements, not just one element.

To apply the style to each, you need to loop through this array-like object and add the styles to each individual element returned:

var elems = document.getElementById("slideshow").getElementsByClassName("arrow");

for (var i = 0; i < elems.length; i++)
    elems[i].style.height = "86px";