Javascript时钟颜色样式

我是JS的新手，想知道是否有办法修改代码中时钟小时和分钟之间“|”的颜色。我想要红色的。 感谢您的帮助、提示和最重要的解释：）

“严格使用”；
var textElem=document.getElementById（“时钟”）；
var textNode=document.createTextNode（“”）；
textElem.appendChild（textNode）；
var curFontSize=24；//不要改变
函数updatelock（）{
var d=新日期（）；
var s=“”；
s+=（10>d.getHours（）？“0”：“）+d.getHours（）+”；
s+=（10>d.getMinutes（）？“0”：“）+d.getMinutes（）；
textNode.data=s；
setTimeout（updateLock，60000-d.getTime（）%60000+100）；
}
函数updateTextSize（）{
var targetWidth=0.9；//全屏宽度的比例
对于（var i=0；3>i；i++）{//迭代以获得更好的收敛性
var newFontSize=textElem.parentNode.offsetWidth*targetWidth/textElem.offsetWidth*curFontSize；
textElem.style.fontSize=newFontSize.toFixed（3）*“pt”；
curFontSize=newFontSize；
}
}
updatelock（）；
updateTextSize（）；
addEventListener（“调整大小”，updateExtSize）；

@font-face{
字体家族：钢鱼；
src:url（Images/Steelfish.ttf）；
}
身体{
保证金：0；
填充：0；
文本阴影：0px 1px 1px黑色；
字体家族：钢鱼；
字号：100；
颜色：红色；
字母间距：1px；
}
#钟{
位置：绝对；顶部：-17px；左侧：205px；文本对齐：左侧；z索引：50；
字号：10pt；
颜色：灰色；
}
#分钟{颜色：灰色；}
#图标{位置：绝对；顶部：24px；左侧：0px；宽度：50px；z索引：50；}
#位置{
位置：绝对；顶部：50px；左侧：80px；宽度：250px；高度：50px；文本对齐：左侧；z索引：50；
颜色：#f79b00；
字号：17px；
}
#温度{
位置：绝对；顶部：66px；左侧：160px；宽度：250px；高度：50px；文本对齐：左侧；z索引：50；
颜色：#248ffc；
字号：19px；
}
#状况{
位置：绝对；顶部：14px；左侧：80px；宽度：250px；高度：50px；文本对齐：左侧z索引：50；
颜色：f16000；
字号：19px；
}
#巴尔{
位置：固定；顶部：62px；左侧：60px；宽度：140px；高度：64px；文本对齐：左侧；z索引：12；
边框顶部：1px纯色灰色；
}

这是一把小提琴-

您可能需要添加一个内联元素来包装
|

由于您创建了textNode，因此无法立即添加任何HTML标记

下面是更新的JS代码

"use strict";

            var textElem = document.getElementById("clock");
            // var textNode = document.createTextNode("");
            // textElem.appendChild(textNode);
            var curFontSize = 24;  // Do not changes

            function updateClock() {
                var d = new Date();
                var s = "";
                s += (10 > d.getHours  () ? "0" : "") + d.getHours() + "<span class='timePipe'>|</span>";
                s += (10 > d.getMinutes() ? "0" : "") + d.getMinutes();
                textElem.innerHTML = s;
                setTimeout(updateClock, 60000 - d.getTime() % 60000 + 100);
            }


            function updateTextSize() {
                var targetWidth = 0.9;  // Proportion of full screen width
                for (var i = 0; 3 > i; i++) {  // Iterate for better better convergence
                    var newFontSize = textElem.parentNode.offsetWidth * targetWidth / textElem.offsetWidth * curFontSize;
                    textElem.style.fontSize = newFontSize.toFixed(3) * "pt";
                    curFontSize = newFontSize;
                }
            }

            updateClock();
            updateTextSize();
            window.addEventListener("resize", updateTextSize);

现在我们可以使用innerHTML方法将
var s
作为HTML注入
textElem

textElem.innerHTML=s

请注意，即使创建一个textNode也可以，但是我们需要HTML来设置
的样式。因此，没有必要在那里设置一个，而是将内容添加为HTML

希望这有帮助
用“|”替换“|”谢谢阿里的帮助，但它似乎不起作用。。。除非我没听懂。。。如果我像你在脚本中说的那样更改“|”，结果是这样的：请检查我下面的答案。你将看到更新的JS代码。
.timePipe {
color: red;
}