如何给JavaScript中newElement.innerHTML输出的文本添加自定义样式？

修改后的完整代码（已汉化） #

1. 推荐方案（CSS类控制，易后续调整） #

首先替换你原有的JavaScript代码：

var downloadButton = document.getElementById("download");
var counter = 10;
var newElement = document.createElement("p");
// 给提示文本添加专属CSS类
newElement.classList.add("download-countdown-tip");
newElement.innerHTML = "您可以在10秒后下载文件";
var id;
downloadButton.parentNode.replaceChild(newElement, downloadButton);
id = setInterval(function() {
  counter--;
  if(counter < 0) {
    newElement.parentNode.replaceChild(downloadButton, newElement);
    clearInterval(id);
  } else {
    newElement.innerHTML = "您可以在" + counter.toString() + "秒后下载文件";
  }
}, 1000);

然后替换HTML代码：

<button id="download">下载</button>

接下来在WordPress后台添加自定义CSS：
登录WordPress后台 → 点击左侧菜单栏【外观】→ 【自定义】→ 找到【额外CSS】选项，粘贴以下代码，可按需调整参数：

.download-countdown-tip {
  /* 自定义字体大小，按需修改数值 */
  font-size: 22px;
  /* 自定义文字颜色，替换色值即可 */
  color: #2563eb;
  /* 可选：加粗文字 */
  font-weight: 600;
  /* 可选：调整上下边距 */
  margin: 12px 0;
}

2. 简化方案（无需额外加CSS，直接JS设置行内样式） #

如果找不到WordPress添加自定义CSS的入口，直接替换成以下JS代码即可，样式直接在代码里修改：

var downloadButton = document.getElementById("download");
var counter = 10;
var newElement = document.createElement("p");
// 直接通过JS设置样式，参数按需修改
newElement.style.fontSize = "22px";
newElement.style.color = "#2563eb";
newElement.style.fontWeight = "600";
newElement.style.margin = "12px 0";
newElement.innerHTML = "您可以在10秒后下载文件";
var id;
downloadButton.parentNode.replaceChild(newElement, downloadButton);
id = setInterval(function() {
  counter--;
  if(counter < 0) {
    newElement.parentNode.replaceChild(downloadButton, newElement);
    clearInterval(id);
  } else {
    newElement.innerHTML = "您可以在" + counter.toString() + "秒后下载文件";
  }
}, 1000);

HTML代码同上：

<button id="download">下载</button>

说明 #

• 两种方案都保留了原有的倒计时逻辑，仅修改了提示文本为中文，增加了样式控制
• 样式参数可以根据你的站点风格自由调整，比如颜色可以换成你想要的十六进制色值、rgb值，字体大小按需改数值即可

内容的提问来源于stack exchange，提问作者Rahul