Question 245700 in Javascript Question posted in
A very good W3school tutorial can be found here.

How to access a class within a parent element in javascript

Looked in the ‘Similar Questions’ list and found one that was almost what I needed, but not quite…
What I need is to modify the properties of a class that is within 3 different elements.

Thanks for your input, David – Here’s a more complete rundown:

HTML:

<div id="col1" name="col1">
  <div (or image, etc.)></div>

  <div class="spacer"></div>

  <div (or image, etc.)></div>

  <div class="spacer"></div>

  <div (or image, etc.)></div>
</div>

<div id="col2" name="col2">
  <div (or image, etc.)></div>

  <div class="spacer"></div>

  <div (or image, etc.)></div>

  <div class="spacer"></div>

  <div (or image, etc.)></div>
</div>

If I were to use CSS it would look like:

#col1 .spacer{
  height:10px;
}

#col2 .spacer{
  height:15px;
}
etc...

but I want to control the classes dynamically using JS

I’m familiar with document.getElementById and document.getElementsByClassName, but can’t seem to get the syntax right to access the class within each ID.

Tags:

2

Answers


  1. 0

    we can use :deep syntax in vue js. To access a class from its parent element.

    Login or Signup to reply.
  2. 0

    you can use querySelectorAll to get all of those you want like so :

     // reflects only spacer inside col1 
var col1Spacers = document.querySelectorAll('#col1 .spacer');
col1Spacers.forEach(function(spacer) {
spacer.style.height = '10px';
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search