javascript 如何选择和编辑文本内容的一部分

dy1byipe 于 2023-03-28 发布在 Java

关注(0)|答案(3)|浏览(149)

<h1 id="block ">This is my header block</h1>

我想改变块字的颜色每2秒在JavaScript

let colorss = ["blue", "green", "pink", "purple"]
let curColor = 0
changeColor = () =>{
    let element = document.querySelector("#block")
    element.style.color = colors[curColor]
    curColor++
    if (curColor >3) {
        curColor = 0
    }
    setTimeout(changeColor, 2000)
}
setTimeout(changeColor, 2000)

我这样做了，它的工作原理改变颜色的h1标签每2秒。
我想把它应用到“块”字怎么办？

JavaScript

来源：https://stackoverflow.com/questions/75850155/how-can-i-select-and-edit-a-part-of-a-textcontent

3条答案

按热度按时间

3qpi33ja1#

您可以将要选择的单词包含在另一个标签中，例如<span>。

let colors = ["blue", "green", "pink", "purple"]
let curColor = 0;
let changeColor = () => {
  let element = document.querySelector("#block > span")
  element.style.color = colors[curColor]
  curColor = (curColor + 1) % colors.length;
  setTimeout(changeColor, 2000)
}
setTimeout(changeColor, 2000)

<h1 id="block">This is my header <span>block</span></h1>

赞(0）回复(0）举报 2023-03-28

uidvcgyl2#

let colors = ["blue", "green", "pink", "purple"]
      let curColor = 0, nIntervId

      changeColor = () => {
         let element = document.querySelector("#block > span")
         //element.style.cssText = "color:" + colors[curColor]
         element.style.color = colors[curColor]
         curColor = ++curColor % 3
      }

      function initChangeColor() {
         if (!nIntervId) {
            nIntervId = setInterval(changeColor, 2000)
         }
      }

      function stopchangeColor() {
         //call this to stop color changing
         clearInterval(nIntervId)
         nIntervId = null
      }
      
      initChangeColor()

<!DOCTYPE html>
<html lang="en">

   <head>
      <meta charset="UTF-8">
      <title>Page Title</title>
      <meta name="viewport" content="width=device-width,initial-scale=1">
   </head>

   <body>
      <h1 id="block">This is my header <span id="multicolor">block</span></h1>
   </body>

</html>

赞(0）回复(0）举报 2023-03-28

wvt8vs2t3#

我同意这两个解决方案！
但如果你想在开始时设置你的颜色，不想有一个黑色的块。
您可以执行以下操作：
此外，您可以将颜色数组和所需的选择器作为参数传递到函数中。

let colors = ["blue", "green", "pink", "purple"];
        let curColor = null;
        let interval;
        let element;
        let query = "#block > span";
    
    function changeColor(cols,query){
        element = document.querySelector(query);
        if(curColor === null){
            curColor = 0;
        }
        element.style.color = cols[curColor];
        curColor = (curColor + 1) % colors.length;
    }
    window.addEventListener("DOMContentLoaded",() => {changeColor(colors,query);})
    interval = setInterval(changeColor,2000,colors,query);

<h1 id="block">This is my header <span>block</span></h1>

赞(0）回复(0）举报 2023-03-28

我来回答

javascript 如何选择和编辑文本内容的一部分

3条答案

相关问题

热门标签

最新问答