How to change a style property of element by class name without any use of ID's in JS?

Question

I am doing a school project and it's my first time using JS, and we are not allowed to use any ID's for css styling, but on some event that the user does I want to change the style of a div in the page:

HTML:

<div class="ads">
  ...
</div>

CSS:

.ads{
    display:block;
    //and some other style properties
}

and when the user do the event I want to change the display property into :

display : none;

I know how it can be done using ID for the element, but how can it be done only by a class name?

I would like to be able to do it something like this:

document.getElementsByClassName('ads').style.display=none;

Thank you.

PeterMader · Accepted Answer · 2017-08-18 14:41:31Z

3

If you know that there is only one element with that class, use the first element of the NodeList that document.getElementsByClassName returns:

document.getElementsByClassName('ads')[0].style.display = 'none';

answered Aug 18, 2017 at 14:41

PeterMader

7,3452 gold badges24 silver badges32 bronze badges

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

1 Comment

PeterMader Over a year ago

Nice downvoting spree.

Ivan Minakov · Accepted Answer · 2017-08-18 14:40:51Z

2

document.getElementsByClassName('ads')[0].style.display ='none';

answered Aug 18, 2017 at 14:40

Ivan Minakov

1,4528 silver badges12 bronze badges

1 Comment

Thomas Over a year ago

Or loop over the returned list if you want to change all of them.

eclipseeer · Accepted Answer · 2017-08-18 14:55:49Z

2

If you have just a one element with class"ads", you can use:

document.querySelector('.ads').style.display='none'

Else, if you have more than one element you can add a unique class name for you element like this

<div class="ads foo">

and using document.querySelector('.foo').style.display='none' for changing it's style.

edited Aug 18, 2017 at 14:55

answered Aug 18, 2017 at 14:51

eclipseeer

555 bronze badges

1 Comment

PeterMader Over a year ago

Note that none needs to be wrapped in quotes.

alessandrio · Accepted Answer · 2017-08-18 14:48:24Z

1

You should put index, also the string after the equal sign must be with quotation marks, like below:

document.getElementsByClassName('ads')[0].style.display="none";

w3schools

The NodeList object represents a collection of nodes. The nodes can be accessed by index numbers. The index starts at 0.

edited Aug 18, 2017 at 14:48

answered Aug 18, 2017 at 14:41

alessandrio

4,3802 gold badges31 silver badges42 bronze badges

Collectives™ on Stack Overflow

How to change a style property of element by class name without any use of ID's in JS?

4 Answers 4

1 Comment

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related