在Javascript中将转换应用于注入的html_Javascript_Css

在Javascript中将转换应用于注入的html

javascript css

在Javascript中将转换应用于注入的html,javascript,css,Javascript,Css,我和JS一起工作了大约两周，我正在做一个小项目。目标是在按下按钮时能够更改给定字符串中每个字符的颜色。我已经走了那么远如您所见，我为每个字符添加了跨距，以便可以单独编辑它们。我正在尝试对跨距应用过渡，这样当我单击按钮时，颜色将淡入另一种颜色，而不是瞬间改变。可能吗以下是： JS var letter=document.getElementById（“letter”）； var text=letter.innerHTML； var按钮=document.querySelector（“按钮”）；

我和JS一起工作了大约两周，我正在做一个小项目。目标是在按下按钮时能够更改给定字符串中每个字符的颜色。我已经走了那么远

如您所见，我为每个字符添加了跨距，以便可以单独编辑它们。我正在尝试对跨距应用过渡，这样当我单击按钮时，颜色将淡入另一种颜色，而不是瞬间改变。可能吗

以下是：

var letter=document.getElementById（“letter”）；
var text=letter.innerHTML；
var按钮=document.querySelector（“按钮”）；
按钮。addEventListener（“单击”），函数（）{
var newText=“”；
对于（变量i=0；i

这是绝对可能的。这里的关键思想是在脚本开始时将字符串分隔为span元素（每个字符），而不是在每次单击事件中

采用这种方法将简化您的实现-您只需在按钮单击处理程序中为每个span元素指定一种新的“随机颜色”，并将CSS转换留给浏览器来处理：

var letter=document.getElementById（“letter”）；
var text=letter.innerHTML；
var按钮=document.querySelector（“按钮”）；
//将每个字符的内部文本节点转换为跨度节点
//在剧本的开头
var text=letter.innerText；
letter.innerText=''；
对于（变量i=0；i


span{
过渡：所有4s；
}
#书信{
字号：9em；
位置：绝对位置；
最高：30%；
左：50%；
转换：翻译（-50%，-50%）；
颜色：蓝色；
}

文件
颜色
点击我
这是一个更简洁的版本

const-letters=document.queryselectoral（'.letters'）；
const button=document.querySelector（'button'）；
按钮。addEventListener（'单击'，（）=>{
letters.forEach（元素=>{
element.style.transition='1s'；
element.style.color=randomColor（）；
});
});
常量随机颜色=（）=>{
const r=Math.floor（Math.random（）*256）；
const g=Math.floor（Math.random（）*256）；
常数b=数学地板（数学随机（）*256）；
返回`rgb（${r}，${g}，${b}）`；
};
正文{
背景色：#ffe7e0；
}
#包装纸{
字号：4em；
位置：绝对位置；
最高：30%；
左：50%；
转换：翻译（-50%，-50%）；
颜色：蓝色；
}

文件
C
o
L
o
R
点击我

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="CSS/textColorV2.css">
</head>

<body>
<p id="letter">Color</p>
<button>Click ME</button>

<script type="text/javascript" src="JS/textColorV2.js"></script>

</body>
</html>

bodybody {
background-color: #FFE7E0;
}

span{
transition: all 4s;
}

#letter {
font-size: 9em;
position: absolute;
top: 30%;
left: 50%;
transform: translate(-50%, -50%);
color:blue;
}

var letter = document.getElementById("letter");
var text = letter.innerHTML;
var button = document.querySelector("button");

button.addEventListener("click", function () {
  var newText = "";
  for (var i = 0; i < text.length; i++) {
    newText += '<span style="color:' + randomColor() + '">' + 
    text.charAt(i) + '</span>';
    letter.innerHTML = newText;
    letter.classList.add("trans");
    };
});

function randomColor() {
  //r
  var r = Math.floor(Math.random() * 256);
  //g
  var g = Math.floor(Math.random() * 256);
  //b
  var b = Math.floor(Math.random() * 256);
  return "rgb(" + r + " ," + g + " ," + b + ")";
}