Several DIVs with the same class can have varying CSS values

Question

Several DIVs with the same class can have varying CSS values

I am looking to modify the left-margin value of various separate DIVs using JavaScript. The challenge is:

I only want to use a single className, and
I want the margin to increase by 100px for each instance of the class. This way, instead of all the DIVs overlapping, they will be evenly spaced out: the first at margin-left:0px, the second at margin-left:100px, the third at margin-left:200px, and so on.

Currently, I have code that applies the same margin-left to all DIVs.

<script>
    b = document.getElementsByClassName('spacing');
    for (i = 0; i < b.length; i++) {
    b[i].style.marginLeft = "100px";
    }
</script>

I am wondering if there is a way to have the JavaScript dynamically find each instance of the class sequentially and instead of just setting margin-left: 100px for all, to compute something like (margin applied to last instance of class + X) so that each of the 100 DIVs with the same className will have a unique marginLeft value?

javascript html css getelementsbyclassname margin-left

Answer 1

Answer №1

Indeed, there is a solution to this issue. You can simply calculate the margin by multiplying the iteration number like so: i*100+'px' instead of using "100px".

var b = document.getElementsByClassName('spacing');
    for (i = 0; i < b.length; i++) {
      b[i].style.marginLeft = i*5+'px';
    }

Take a look at this functional example

Answer 2

Indeed, there is a solution to this issue. You can simply calculate the margin by multiplying the iteration number like so: i*100+'px' instead of using "100px".

var b = document.getElementsByClassName('spacing');
    for (i = 0; i < b.length; i++) {
      b[i].style.marginLeft = i*5+'px';
    }

Take a look at this functional example

Answer 3

Answer №2

The key is to monitor the increase in margin with each loop iteration:

var elements = document.getElementsByClassName('spacing');
var marginIncrease = 0;
for (j = 0; j < elements.length; j++) {
   marginIncrease += 100;
   elements[j].style.marginLeft = marginIncrease + "px";
}

Give it a try and see if it works for you.

Take a look at a demo here: https://jsfiddle.net/d9y45rag/

Answer 4

The key is to monitor the increase in margin with each loop iteration:

var elements = document.getElementsByClassName('spacing');
var marginIncrease = 0;
for (j = 0; j < elements.length; j++) {
   marginIncrease += 100;
   elements[j].style.marginLeft = marginIncrease + "px";
}

Give it a try and see if it works for you.

Take a look at a demo here: https://jsfiddle.net/d9y45rag/

Several DIVs with the same class can have varying CSS values

Answer №1

Answer №2

Similar questions

Captivating Images accompanied by Descriptive Captions

Finding the correct value in Ajax is proving to be a challenge

What causes the height and width properties in a div to remain unchanged even after using the zoom/scale CSS?

Adding the <a> tag causes Superfish to malfunction

Is it necessary for vertex labels to be distinct within a graph?

Activate the places_changed event in Google Maps by clicking the submit button

Is there a way to show a pre-set username value to prevent receiving an error message that says it's undefined?

Is it possible to utilize sendKeys(Keys.RETURN), sendKeys(Keys.ENTER), and sendKeys(Keys.SPACE) to activate a button or mark a checkbox?

Is the callback still triggered even after the off function is called?

Setting URL parameters dynamically to the action attribute of a form using JavaScript code

Tips for safeguarding your passwords across diverse authentication methods

Use Cypress to make requests to GraphQL endpoints using the .request method

Loop through a JSON object using a sequence of setTimeout() functions

Ensure that the view is only updated once the JSON has been completely received from the AJAX call in AngularJS

What is the best way to make a flex box smoothly appear on the

Encountering difficulties in fetching data with formData in nextJS

Looping through an array of nested objects using Vue

How can I pre-fill an AutoModelSelect2Field with static information in Django using the django-select2 library?

How to retrieve a form submission from Jquery HandsonTable in PHP using $_POST

Ways to change the value of a property in reverse