What is the best way to target and manipulate the transform property of multiple div elements in JavaScript?

Question

What is the best way to target and manipulate the transform property of multiple div elements in JavaScript?

Looking at this code snippet, my goal is to have all the boxes rotate 180deg with a single click, without needing to apply different ID names:

function rotateAllBoxes() {
  var boxes = document.getElementsByClassName("box");
  for (var i = 0; i < boxes.length; i++) {
    boxes[i].style.background = "rgba(55, 111, 172, 0.408)";
    boxes[i].style.transform = "rotateZ(180deg)";
  }
}

.wrap {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
}

.box {
  width: 50px;
  height: 50px;
  margin: 2px;
  transition: all 0.5s ease-in-out;
  background-color: rgba(111, 154, 201, 0.808);
}

<div class="wrap">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
<button id="btn" onclick="rotateAllBoxes()">Rotate All Boxes</button>

javascript css

Answer 1

Answer №1

To apply the "boxes" class to all of your boxes, you can easily target them using a query selector.

var elementsArray = document.querySelectorAll(".boxes");

Once you have selected all the elements with the "boxes" class, you can iterate through them using a for loop to customize their styles.

for (var i = 0; i < elementsArray.length; i++) {
   elementsArray[i].style.backgroundColor = "rgba(55, 111, 172, 0.408)";
   elementsArray[i].style.transform = "rotateZ(180deg)";
}

Answer 2

To apply the "boxes" class to all of your boxes, you can easily target them using a query selector.

var elementsArray = document.querySelectorAll(".boxes");

Once you have selected all the elements with the "boxes" class, you can iterate through them using a for loop to customize their styles.

for (var i = 0; i < elementsArray.length; i++) {
   elementsArray[i].style.backgroundColor = "rgba(55, 111, 172, 0.408)";
   elementsArray[i].style.transform = "rotateZ(180deg)";
}

Answer 3

Answer №2

IDs are unique, meaning you cannot have more than 2 elements with the same ID. Instead of repeating IDs, you can target all the div elements inside the .wrap class using querySelectorAll or by selecting the div with their class names.

function home() {
// document.querySelectorAll(".box2, .box1") -> with the same class name
document.querySelectorAll(".wrap > div")
.forEach(box => {
box.style.background = "rgba(55, 111, 172, 0.408)";
box.style.webkitTransform = "rotateZ(180deg)";
});
}

.wrap {
display: grid;
grid-template-columns: repeat(8, 1fr);
}

.box1 {
background: rgba(111, 154, 201, 0.808);
width: 50px;
height: 50px;
margin: 2px;
transition-property: all;
transition-duration: 0.5s;
transition-timing-function: ease-in-out;
}

.box2 {
background: rgba(90, 134, 180, 0.808);
width: 50px;
height: 50px;
margin: 2px;
transition-property: all;
transition-duration: 0.5s;
transition-timing-function: ease-in-out;
}

<div class="wrap">
<div class="box2"></div>
<div class="box1"></div>
<div class="box2"></div>
<div class="box1"></div>
<div class="box2"></div>
<div class="box1"></div>
<div class="box2"></div>
<div class="box1"></div>
</div>
<button id="btn" onclick="home()">submit</button>

-- Edit --

To revert the background color of the boxes back to their initial state after the animation is completed, you can add a transitionend event listener that triggers once the transition is complete and changes the background color back to its original value.

document.querySelector('#btn')
.addEventListener('click', function() {
document.querySelectorAll(".wrap > div")
.forEach(box => {
box.addEventListener('transitionend', function() {
this.style.background = this.classList.contains('box1') ? "rgba(111, 154, 201, 0.808)" : "rgba(90, 134, 180, 0.808)";
});

box.style.background = "rgba(55, 111, 172, 0.408)";
box.style.transform = "rotateZ(180deg)";
});
});

.wrap {
display: grid;
grid-template-columns: repeat(8, 1fr);
}

.box1 {
background: rgba(111, 154, 201, 0.808);
width: 50px;
height: 50px;
margin: 2px;
transition-property: all;
transition-duration: 0.5s;
transition-timing-function: ease-in-out;
}

.box2 {
background: rgba(90, 134, 180, 0.808);
width: 50px;
height: 50px;
margin: 2px;
transition-property: all;
transition-duration: 0.5s;
transition-timing-function: ease-in-out;
}

<div class="wrap">
<div class="box2"></div>
<div class="box1"></div>
<div class="box2"></div>
<div class="box1"></div>
<div class="box2"></div>
<div class="box1"></div>
<div class="box2"></div>
<div class="box1"></div>
</div>
<button id="btn">submit</button>

Answer 4

IDs are unique, meaning you cannot have more than 2 elements with the same ID. Instead of repeating IDs, you can target all the div elements inside the .wrap class using querySelectorAll or by selecting the div with their class names.

function home() {
// document.querySelectorAll(".box2, .box1") -> with the same class name
document.querySelectorAll(".wrap > div")
.forEach(box => {
box.style.background = "rgba(55, 111, 172, 0.408)";
box.style.webkitTransform = "rotateZ(180deg)";
});
}

.wrap {
display: grid;
grid-template-columns: repeat(8, 1fr);
}

.box1 {
background: rgba(111, 154, 201, 0.808);
width: 50px;
height: 50px;
margin: 2px;
transition-property: all;
transition-duration: 0.5s;
transition-timing-function: ease-in-out;
}

.box2 {
background: rgba(90, 134, 180, 0.808);
width: 50px;
height: 50px;
margin: 2px;
transition-property: all;
transition-duration: 0.5s;
transition-timing-function: ease-in-out;
}

<div class="wrap">
<div class="box2"></div>
<div class="box1"></div>
<div class="box2"></div>
<div class="box1"></div>
<div class="box2"></div>
<div class="box1"></div>
<div class="box2"></div>
<div class="box1"></div>
</div>
<button id="btn" onclick="home()">submit</button>

-- Edit --

To revert the background color of the boxes back to their initial state after the animation is completed, you can add a transitionend event listener that triggers once the transition is complete and changes the background color back to its original value.

document.querySelector('#btn')
.addEventListener('click', function() {
document.querySelectorAll(".wrap > div")
.forEach(box => {
box.addEventListener('transitionend', function() {
this.style.background = this.classList.contains('box1') ? "rgba(111, 154, 201, 0.808)" : "rgba(90, 134, 180, 0.808)";
});

box.style.background = "rgba(55, 111, 172, 0.408)";
box.style.transform = "rotateZ(180deg)";
});
});

.wrap {
display: grid;
grid-template-columns: repeat(8, 1fr);
}

.box1 {
background: rgba(111, 154, 201, 0.808);
width: 50px;
height: 50px;
margin: 2px;
transition-property: all;
transition-duration: 0.5s;
transition-timing-function: ease-in-out;
}

.box2 {
background: rgba(90, 134, 180, 0.808);
width: 50px;
height: 50px;
margin: 2px;
transition-property: all;
transition-duration: 0.5s;
transition-timing-function: ease-in-out;
}

<div class="wrap">
<div class="box2"></div>
<div class="box1"></div>
<div class="box2"></div>
<div class="box1"></div>
<div class="box2"></div>
<div class="box1"></div>
<div class="box2"></div>
<div class="box1"></div>
</div>
<button id="btn">submit</button>

What is the best way to target and manipulate the transform property of multiple div elements in JavaScript?

Answer №1

Answer №2

Similar questions

A guide on extracting/filtering information from JSON files using JavaScript

Angular error: Trying to assign a value of type ArrayBuffer to a string type

Manipulating Objects with CSS Transform in Global/Local Coordinates

Utilizing a JSON object passed from one JavaScript function to another: A comprehensive guide

Error encountered when running NPM start - file path unable to locate JSON package file

What is the significance of using a double arrow function in Javascript?

Error message: "Unable to POST image with Node/Express (React frontend) while attempting to upload

Javascript background image rotation causes a sudden jump to the top of the webpage

"Implementing jQuery toggle and addClass functions in your

Refreshing a model using angular.js

Leveraging @font-face for various styles and designs

Unforeseen Firefox Problem Arises with display: table CSS Property

Looking to dynamically add content to a webpage without needing to refresh the page? Utilizing AJAX can help achieve that

Is there a way to refresh autocomplete/autofill after form submission with a custom JavaScript function?

Why does the appearance of my PHP spreadsheet change when I attempt to print it?

Using AJAX to submit a form to a CodeIgniter 3 controller

How can I make a POST request from one Express.js server to another Express.js server?

Having trouble uploading several files with Multer functionality?

Flask Server produces a response with a considerable delay when accessed through AJAX

Conceal the cursor within a NodeJS blessed application