时间戳

首页 > 解决方案 > 更改多个字体颜色

javascript - 更改多个字体颜色

问题描述

我有多个h2封闭的文本行。h2颜色在章节中指定style。我正在更改背景，并且由于对比度问题，还需要int++在while循环中的过渡背景脚本达到某个值时更改文本if int===。'h2' 行包含在一些 HTML5 嵌套的 'div' 中。我曾尝试将颜色附加到“div”“id”，但在那里失败了，此后成功地继续前进，但作为通用解决方案，class="forColorChange"在每个h2标签中设置 a 可能会产生巨大的开销。但是，对于多行文本，单独写出和访问每一行会变得乏味。是否有一段 JavaScript 代码行基本上以批处理效率表示，每转一次 'h2' 或者，forColorChange，从（样式部分）color: Green到一口气，“颜色：橙色”？我的复制和粘贴可运行的 HTML5 骨架存根位于下面的代码部分。

<!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>

标签： javascripthtml

解决方案

h2是的，您可以通过从包含所有这些s 的任何容器中添加/删除一个类来使用 CSS 来做到这一点（body如果没有更接近的话）。为您想要的颜色定义类h2作为后代，例如：

.some-category h2 {
    color: whatever;
}
.another-category h2 {
    color: something;
}

...然后根据您正在做的计算，从容器中添加/删除some-category,another-category等。

现场示例：

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>

推荐阅读