Question

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

除了启用文本以更改颜色外，一切正常。我不确定是不是因为我有一个span 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，以及我在codepen 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

感谢@Marcin Szwarc

这很有效，但文字没有从红色变回白色，所以我添加了

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

感谢您的帮助！

Answer 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。

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

3 个答案: