为什么我不能用JavaScript函数覆盖这个CSS？

我希望有以下代码：

$('#submitbutton').click(function(e) {
  e.preventDefault();
  setTimeout(function(){ $('#form1').submit(); }, 200);
  document.getElementById( "textdisplay" ).style.color = "yellow";
});

用“Joash”覆盖此CSS杰作， 因此，当我单击按钮时，接收Joash动画的文本将变为黄色，并一直保持这种状态，直到函数超时结束

它不工作，动画只是继续

这是我的密码：

jQuery（'.text'）.html（函数（i，html）{
var chars=jQuery.trim（html.split）（“”）；
返回“”+字符联接（“”）+“”；
});
jQuery（“#提交按钮”）。单击（函数（e）{
e、 预防默认值（）；
setTimeout（函数（）{
jQuery（“#form1”）.submit（）；
}, 2000);
document.getElementById（“textdisplay”）.style.color=“黄色”；
});
正文{
背景：#161616；
颜色：#bdbd；
字体大小：300；
高度：100vh；
保证金：0；
显示器：flex；
对齐项目：居中；
证明内容：中心；
文本对齐：居中；
字体系列：Helvetica neue，roboto；
}
* {
框大小：边框框；
字体系列：-苹果系统，BlinkMacSystemFont，“segoe ui”，机器人，氧气，ubuntu，cantarell，“fira sans”，“droid sans”，“helvetica neue”，Arial，无衬线；
字体大小：40px；
-webkit字体平滑：抗锯齿；
-moz osx字体平滑：灰度；
}
#提交按钮{
宽度：35%；
填充：15px；
边缘顶部：10px；
边缘底部：25px；
背景色：#e4bb97；
边框：2px实心#3D3B3C；
光标：指针；
字号：900；
字体大小：0.5em；
颜色：#3D3B3C；
过渡：背景色0.2s；
边界半径：17px；
}
#表格1{
颜色：红色；
背景颜色：绿色；
宽度：150px；
高度：150像素；
}
@导入url(https://fonts.googleapis.com/css?family=Oxygen);
#文本显示，
#text显示悬停：悬停{
/*
*元素设置
*/
}
#文本显示范围，
#text显示悬停：悬停范围{
-webkit动画名称：彩色文本流关键点；
动画名称：彩色文本流关键点；
-webkit动画持续时间：50秒；
动画持续时间：50秒；
-webkit动画迭代计数：无限；
动画迭代次数：无限；
-webkit动画方向：交替；
动画方向：交替；
-webkit动画填充模式：正向；
动画填充模式：正向；
}
@-webkit关键帧彩色文本流关键帧{
0% {
颜色：#d65c97；
}
5% {
颜色：#5cd666；
}
10% {
颜色：#a55cd6；
}
100% {
颜色：64d65c；
}
}
@关键帧彩色文本流关键帧{
0% {
颜色：#d65c97；
}
90% {
颜色：#5cd666；
}
95% {
颜色：#d67e5c；
}
100% {
颜色：64d65c；
}
}
#彩色文本流范围：第n个类型（1），
#彩色文本流悬停：悬停范围：第n个类型（1）{
-webkit动画延迟：-19.8秒；
动画延迟：-19.8秒；
}
#彩色文本流范围：第n个类型（100），
#彩色文本流悬停：悬停范围：类型的第n个（100）{
-webkit动画延迟：0秒；
动画延迟：0s；
}
身体{
背景色：#1A1A；
颜色：#fefefe；
字体系列：“Ubuntu”；
文本转换：大写；
字母间距：0.2米；
字体大小：1.3em；
线高：2；
字体大小：300；
文本呈现：优化易读性；
文本对齐：居中；
}
.集装箱{
位置：绝对位置；
最高：80%；
左：50%；
宽度：10%；
身高：10%；
-webkit转换：翻译（-50%，-50%）；
-ms转换：翻译（-50%，-50%）；
转换：翻译（-50%，-50%）；
}
.txt{
显示：块；
}
a{
文字装饰：无；
位置：绝对位置；
底部：10px；
右：10px；
文本对齐：右对齐；
颜色：#eee；
字体大小：15px；
线高：15px；
}

蓝盒子
对于一个更简单的示例，您可以删除所有CSS，除了
#textdisplay span{
和
@keyframes彩色文本流键{
：


jQuery（'.text'）.html（函数（i，html）{
var chars=jQuery.trim（html.split）（“”）；
返回“”+字符联接（“”）+“”；
});
jQuery（“#提交按钮”）。单击（函数（e）{
e、 预防默认值（）；
setTimeout（函数（）{
console.log（“提交”）；
}, 2000);
document.getElementById（“textdisplay”）.style.color=“黄色”；
})；
#文本显示范围{
-webkit动画名称：彩色文本流关键点；
动画名称：彩色文本流关键点；
-webkit动画持续时间：50秒；
动画持续时间：50秒；
-webkit动画迭代计数：无限；
动画迭代次数：无限；
-webkit动画方向：交替；
动画方向：交替；
-webkit动画填充模式：正向；
动画填充模式：正向；
}
@关键帧彩色文本流关键帧{
0% {
颜色：#d65c97；
}
90% {
颜色：#5cd666；
}
95% {
颜色：#d67e5c；
}
100% {
颜色：64d65c；
}
}

提交
蓝盒子
.style.Color
大小写在编程中很重要（链接中也没有
提交按钮
，请将问题本身的所有相关代码发布在a中）这就是问题所在。添加了代码：d最终必须使用此
颜色
信息的文本是
#textdisplay span
的直接子元素。由于它将从其元素祖先继承，因此将使用此
#textdisplay span
元素的计算值，该值在动画
颜色文本流中设置-按键
。更改祖父母

#文本显示的影响很小，就像您更改了身体的颜色一样。所以这是不可能的？；-；我要给我的长子取名为“CertainPerformance”，谢谢！