How do I edit the styles of all divs with the same class using javascript?
Question
I'm working on a website to contain my programming projects and such, that will grow as I get more skilled and make more things. I'm implementing a dark mode button that I would like to target all divs with the class "mainBody" however, it currently only targets the one that the dark button is in. I've tried many solutions from stackoverflow and other sites that don't seem to work. Here is the code that only changes one instance:
function goingDark() {
document.getElementsByClassName("mainBody")[0].style.backgroundColor = "#242526";
document.getElementsByClassName("mainBody")[0].style.color = "#ffffff";
document.getElementsByClassName("h2")[0].style.color = "#ffffff";
}
function goingLight() {
document.getElementsByClassName("mainBody")[0].style.backgroundColor = "#ffffff";
document.getElementsByClassName("mainBody")[0].style.color = "#000000";
document.getElementsByClassName("h2")[0].style.color = "#000000";
}
I'm pretty new to Javascript, so any help is greatly appreciated!
4 answers
solution1
1 2022-09-11 18:41:49
document.querySelectorAll('.myclass').forEach(item => { item.style.setProperty('padding-top', '0', 'important') item.style.display = "none"; })
<div class="myclass">1</div> <div class="myclass">2</div> <div class="myclass">3</div>
solution2
0 2022-09-11 18:18:12
in html file:
<div class="myclass">1</div>
<div class="myclass">2</div>
<div class="myclass">3</div>
try like this in js file:
$("#myclass").addClass("mystyle");
// or this
$("#myclass").attr('style', 'padding-top: 0px !important');
// or this
$("#myclass").css("display","none");
and try this in css file:
#mystyle{
color:'red'
...
}
solution3
0 ACCPTED 2022-09-11 18:40:47
You have to use querySelectorAll then iterate through the node list with forEach or forLoop or forOf .Possibilies are endless.Hope i could help
let mainBody = document.querySelectorAll(".mainBody") let h2 = document.querySelectorAll("h2"); function goingDark() { mainBody.forEach(element => { element.style.backgroundColor = "#242526" element.style.color = "#ffffff" }); h2.forEach(element => { element.style.backgroundColor = "#242526" element.style.color = "#ffffff" }); } function goingLight() { mainBody.forEach(element => { element.style.backgroundColor = "#ffffff" element.style.color = "#000000" }); h2.forEach(element => { element.style.backgroundColor = "#ffffff" element.style.color = "#000000" }); }
<body class="mainBody"> <h2>I am a h2</h2> <button onclick="goingDark()">goingDark</button> <button onclick="goingLight()">goingLight</button> </body>
solution4
0 2022-09-11 19:20:52
let m = document.getElementsByClassName("m"); let mi = document.getElementsByClassName("mi"); function goingDark() { for ( i = 0; i < m.length; i++) { m[i].style.backgroundColor = "#242526"; m[i].style.color = "#ffffff"; mi[i].style.color = "#ffffff"; } } function goingLight() { for ( i = 0; i < m.length; i++) { m[i].style.backgroundColor = "#ffffff"; m[i].style.color = "#000000"; mi[i].style.color = "#000000"; } }
.m{ background: pink; color: red; border: 1px solid black; margin: 5px; }
<div class="m"> <h2 class="mi">something</h2> <p>whatever you want here</p> </div> <div class="m"> <h2 class="mi">something</h2> <p>whatever you want here</p> </div> <button onclick="goingDark()">dark</button> <button onclick="goingLight()">light</button>
the issue is that when you select by classname in javascript it returns a html dom object list and this becomes what the styles are added to which is non existent so we have to iterate through it. you can use the foreach but then again its your choice.
hope this helps
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.