Yes, you can do this with CSS by adding/removing a class from whatever container has all of these h2s in it (body if there’s nothing closer). Define classes for the colors you want with h2 as a descendant, e.g.:
.some-category h2 {
color: whatever;
}
.another-category h2 {
color: something;
}
…and then based on the calcuation you’re doing, add/remove some-category, another-category, etc. from the container.
Live Example:
const categories = [
"some-category",
"another-category",
"yet-another-category",
];
let i = 0;
setInterval(() => {
++i;
const container = document.getElementById("container");
for (const cat of categories) {
container.classList.remove(cat);
}
container.classList.add(
categories[i % categories.length]
);
}, 800);
.some-category h2 {
color: blue;
}
.another-category h2 {
color: green;
}
.yet-another-category h2 {
color: red;
}
<h2>I'm not in the container.</h2>
<div id="container">
<h2>I'm an <code>h2</code> in the container.</h2>
<p>I'm in the container but not an <code>h2</code></p>
<h2>I'm another <code>h2</code> in the container.</h2>
<h2>So am I.</h2>
<p>I'm in the container but not an <code>h2</code></p>
</div>
I have multiple h2 enclosed lines of text. The h2 color is specified in the style section. I am changing backgrounds and, because of contrast issues, also need to change the text when the transition background script int++ in the while loop hits a certain value of if int===. The ‘h2’ lines are contained in some HTML5 nested ‘divs’. I have tried attaching color to the ‘div’ ‘id’s but failed there and have since moved on successfully, but with potentially massive overhead as a generic solution, to setting a class="forColorChange" in each h2 tag. However, with multiple lines of text it gets tedious to write out and access each one individually. Is there a code line of JavaScript that basically says in a batch efficiency, turn every ‘h2’ or, everything class tagged with forColorChange, from (the style section) color: Green to in one swoop, ‘color:Orange’? My copy and paste runnable HTML5 skeletal stub is in the code section below.
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="description" content=""/>
<meta name="keywords" content=""/>
<meta name="author" content=""/>
<title>Change Font Color of Multiple <code><H2></code> Lines</title>
<!-- <link rel="stylesheet" type="text/css" href="./CSS-MasterStyle2019.css"/> -->
<style>
div#masterPoetryBlockDiv { }
main#mainStyle { }
article#articleStyle { }
.general-formatting-1 { text-indent:5em; }
.general-formatting-2 { text-indent:10em; }
.forColorChange { }
h1 { text-shadow: 1px 0px 1px Purple, 2px -1px 2px Gray;
color:LightBlue;
}
h2 {/* text-shadow: 1px 0px 1px Purple, 2px -1px 2px Gray; */
color:Yellow;
}
body, #b0 {
background-color: RGB(190, 181, 168) ;
background-image: url('./Your-0.jpg') ;
position: relative ;
z-index: -2 ;
background-position: center top ;
background-repeat: no-repeat ;
background-attachment: fixed ;
background-size: cover ;
transition: background 0ms ease-in-out 400ms;
}
#b1 {
background-color: DarkGray ;
background-image: url('./Your-1.jpg') ;
position: relative ;
z-index: -2 ;
background-position: center top ;
background-repeat: no-repeat ;
background-attachment: fixed ;
background-size: cover ;
transition: background 500ms ease-in-out 400ms;
}
#b2 {
background-color: rgb(46, 46, 46) ;
background-image: url('./Your-2.jpg') ;
position: relative ;
z-index: -2 ;
background-position: center top ;
background-repeat: no-repeat ;
background-attachment: fixed ;
background-size: cover ;
transition: background 500ms ease-in-out 0ms;
}
</style>
<script>
var int = 0;
function shiftbackgrd(interval, frames)
{"use strict";
var swap = window.setInterval(IncrementCuckooBkgrnds, interval);
function IncrementCuckooBkgrnds()
{
if(int === 2 ) {clearInterval(swap);}
while (int !== 2 )
{
int++;
document.body.id = "b"+int;
/* Asking the question for an easier BATCH type color change of all Tag '<h2>' (or by class 'forColorChange') and do away with the heavy overhead within the 'ifs' below where every individual line, albeit successful, is being accessed. It is definitely not good for a large number of lines or a high int count.*/
var colorCall = ["Red", "SkyBlue"];
const changeColor = document.getElementsByClassName("forColorChange");
if(int === 1) {
changeColor[0].style.color = colorCall[0];
changeColor[1].style.color = colorCall[0];
changeColor[2].style.color = colorCall[0];
changeColor[3].style.color = colorCall[0];
changeColor[4].style.color = colorCall[0];
changeColor[5].style.color = colorCall[0];
changeColor[6].style.color = colorCall[0];
}
if(int === 2) {
changeColor[0].style.color = colorCall[1];
changeColor[1].style.color = colorCall[1];
changeColor[2].style.color = colorCall[1];
changeColor[3].style.color = colorCall[1];
changeColor[4].style.color = colorCall[1];
changeColor[5].style.color = colorCall[1];
changeColor[6].style.color = colorCall[1];
}
if(int !== 2 ) {break;}
}
}
}
shiftbackgrd(2400, 3); //milliseconds, frames
</script>
</head>
<body>
<div id="masterPoetryBlockDiv">
<main id="mainStyle">
<article id="articleStyle">
<br/><h1 class="general-formatting-1">Cuckoo Clock Schematics</h1><br/>
<h2 class="forColorChange general-formatting-1">Most times</h2>
<h2 class="forColorChange general-formatting-2">one's cuckoo clock</h2>
<h2 class="forColorChange general-formatting-2">interpretation of reality,</h2>
<h2 class="forColorChange general-formatting-1">Is bigger</h2>
<h2 class="forColorChange general-formatting-2">than one's ability</h2>
<h2 class="forColorChange general-formatting-2">to comprehend</h2>
<h2 class="forColorChange general-formatting-2">its workings.</h2>
</article>
</main>
</div>
</body>
</html>
Thank you greatly @T.J. Crowder. The question has been closed as unintelligible. I am working on re-asking it and showing my (skeletal) code. I guess simplicity doesn’t always make sense. I am an amateur, situationally taught, novice-intermediate 🙂 when it comes to javascript. Your understanding, attention, answer and, code was first class. It is a great working solution. I have yet to apply it to my iterations but is obviously the solution. When I have merged your code and fathomed the ‘(const cat of categories)’ line, I will post the result and gratefully mark you solution as the answer.
Excellent working answer. Thank you @T.J. Crowder!!
