在 DOM 中更改 element.style.color 的脚本

Question

我正在尝试使用 jquery.bubble.text.js

创建一种电子邮件地址动态变化的效果

除启用文本更改颜色外，一切正常。我不确定是不是因为我有一个 span id="bubble" 作为 div id="colorchange" 的 child。我使用的脚本是 -

var x = document.getElementById('bubble').innerHTML; if(x == "Well, not anything!" || x == "You get the point..") { document.getElementById('colorchange').innerHTML.style.color = "#FF0000" }

我有 HTML、CSS 和 JS，以及我试图在代码笔中实现的更准确和说明性的图片 HERE

谢谢你的帮助！

Answer 1

不要设置 innerHtml 的样式，它只是一个类似于 "Hello, World!" 的字符串，而不是包含它的元素，要设置元素的样式，请使用：

var x = document.getElementById('bubble').innerHTML;
if(x == "Well, not anything!" || x == "You get the point..") {
      document.getElementById('colorchange').style.color = "#FF0000";
}

<span id="colorchange">
    <span id="bubble">Well, not anything!</span>
</span>

Answer 2

使用window.setInterval(<function_name>, <interval>)并将您的代码放入函数中，例如：

window.setInterval(color_text, 500);

function color_text(){
  var x = document.getElementById('bubble').innerHTML;
  if(x == "Well, not anything!" || x == "You get the point..") {
    document.getElementById('colorchange').innerHTML.style.color = "#FF0000"
  }
}

我不确定 style 是否存在于 innerHTML 上。如果不使用 document.getElementById('colorchange').style.color.

Answer 3

谢谢@Marcin Szwarc

成功了，但是文本没有从红色变回白色，所以我添加了

else {
document.getElementById('colorchange').style.color = "#FFFFFF" }

感谢您的帮助！

在 DOM 中更改 element.style.color 的脚本

Script to change element.style.color in DOM

javascript

jquery

innerhtml

getelementbyid