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

【问题标题】：Script to change element.style.color in DOM在 DOM 中更改 element.style.color 的脚本
【发布时间】：2017-09-06 17:14:34
【问题描述】：

我正在尝试创建一个使用 jquery.bubble.text.js 动态更改电子邮件地址的效果

除了使文本能够改变颜色之外，一切都可以找到。我不确定是不是因为我有一个跨度 id="bubble" 作为 div id="colorchange" 的孩子。我使用的脚本是 -

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

谢谢你的帮助！

【问题讨论】：

该代码不会继续运行...它运行一次就完成了。您需要找到脚本触发的某个事件来说明文本已更改。
我认为你应该在 if 上添加一个 else，将文本着色为白色
x 充满了<span>...</span> 它永远不会包含您正在测试的文本...
document.getElementById('colorchange').innerHTML.style 应该是document.getElementById('colorchange').style

标签： javascript jquery innerhtml getelementbyid

【解决方案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>

【讨论】：

【解决方案2】：

感谢@Marcin Szwarc

这行得通，但是文本没有从红色变回白色，所以我添加了

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

感谢您的帮助！

【讨论】：

【解决方案3】：

使用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。

【讨论】：

请确保该样式在 innerHTML 上不存在，因为它是一个字符串，而这是 OP 代码的唯一错误。
这个建议真的很傻。为什么setInterval 会修复一些问题？谈论一个盲目的解决方法！我很确定 OP 的控制台仍然充满 JS 错误
您需要不断地运行该代码。在原始问题代码中只运行一次