Javascript - add css style to element with class

Question

I want to add only one css style in JS. I don't want to include jQuery for only one thing.

My code:

document.addEventListener('DOMContentLoaded', function() {
    if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1) {
        var productAttr = document.getElementsByClassName('product-attributes');
        productAttr.style.top = "-90px";
    }
});

The error from console is:

TypeError: 'undefined' is not an object (evaluating 'productAttr.style.top = "-90px"')

If I want change other styles f.e. opacity or color, I get the same problem.

How can I fix this ?

Thanks in advance for help.

Answer 1

You need to loop through your results because getElementsByClassName() returns a collection of elements:

for(var i = 0; i < productAttr.length; i++)
{
    productAttr[i].style.top = "-90px";
}