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.

Possible duplicate of How to change css property using javascript — 8eecf0d2
– 8eecf0d2, Commented Feb 16, 2016 at 13:14
getElementsByClassName returns a collection of matching elements, not a single object — DanielS
– DanielS, Commented Feb 16, 2016 at 13:15

brso05 · Accepted Answer · 2016-02-16 13:17:47Z

4

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

edited Feb 16, 2016 at 13:17

answered Feb 16, 2016 at 13:14

brso05

13.3k2 gold badges25 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Peter Csala · Accepted Answer · 2021-10-26 07:18:14Z

0

Maybe it's because you can not give negative values in CSS

top:"-90px" === bottom "90px"

Maybe now it would work

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

edited Oct 26, 2021 at 7:18

Peter Csala

23.7k16 gold badges51 silver badges96 bronze badges

answered Oct 26, 2021 at 7:16

Abdulrahman Mohammed

11 bronze badge

Comments

zehata · Accepted Answer · 2019-06-27 12:24:38Z

-1

It's preferred to have an id assigned to the targeted element then target using getElementById() as there cannot be elements with the same id, hence getElementByClassName() will return an array if there are multiple elements with the same className. If you need to target multiple elements, you should for-loop through them while applying the change to the nth item being looped:

for(x = 0; x < array.length; x++){
    array[x].style.top = '-90px';
}

Gentle reminder: also remember to have position: relative|absolute|fixed to ensure 'top' attribute works

edited with thanks to Sebastien Daniel

edited Jun 27, 2019 at 12:24

answered Feb 16, 2016 at 13:44

zehata

3,6942 gold badges17 silver badges24 bronze badges

4 Comments

Sebastien Daniel Over a year ago

when using getElementsByClassName() you're obtianing a COLLECTION (i.e. an array-like structure). Your above code will generate an error because an HTML collection does NOT have the style property. In addition, setting style via the style property is discouraged and you should use element.setAttribute("style", "value");

zehata Over a year ago

So its better to change the element to have an id, then target the element by id?

Sebastien Daniel Over a year ago

Not necessarily, it all depends on your use-case. If your target is UNIQUE, then using #id and getElementById() is preferrable. However, if you have multiple elements that need to be adjusted (That share a className, for example), then using getElementsByClassName() will allow you to grab them all and iterate over them with whichever process those elements need to go through.

Robson Over a year ago

Ok, thanks, I added id instead class, and it works. Thanks

PedroZGZ · Accepted Answer · 2019-03-29 13:30:14Z

-1

When selecting a class you have to indicate what number is as an Tag, it is not like the id that there is only one.

It would be something like this code depending on which of the classes you want to apply it:

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

answered Mar 29, 2019 at 13:30

PedroZGZ

12 bronze badges

Collectives™ on Stack Overflow

Javascript - add css style to element with class

4 Answers 4

Comments

Comments

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related