根据值更改跨度标签的颜色答案

【问题标题】：Change color of span tag depending on value根据值更改跨度标签的颜色
【发布时间】：2017-12-06 08:21:36
【问题描述】：

我想在以下 HTML 中更改 message 变量的颜色：

<span id="mess" style="visibility:visible;">
                <text id="tex">{{ message }}</text>
</span

我正在使用 Jinja2 和 Flask - Python 将值传递给{{ message }} 多变的。以下是我尝试的方法：

$(document).ready(function(){

            if (document.getElementById('tex').value == 'Message sent !')
            {
                document.getElementById('tex').setAttribute("style", "color:green;");
            }
            else
            {
                document.getElementById('tex').setAttribute("style", "color:red;");
            }
});

document.getElementById('tex').value 的结果始终为undefined，message 变量的文本颜色始终为红色。

有没有办法可以做到这一点？提前谢谢你。

【问题讨论】：

如果你也在使用jQuery，为什么还要使用Vanilla JS
这是我为练习目的而做的一个项目，我也想练习一些 Javascript。这是唯一的原因。
<text> 不是标准标签，只有表单字段才有值。使用 Flask 设置一个类并使用 CSS 设置样式而不是使用 JavaScript 更改颜色会更简洁。

标签： javascript html jinja2

【解决方案1】：

让我们使用包含选择器。

$(document).ready(function() {
  if ($('#tex:contains("Message sent !")').length) {
    $('#tex').css('color', 'green');
  } else {
    $('#tex').css('color', 'red');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="mess" style="visibility:visible;">
  <text id="tex">Message sent !</span>
</span>

【讨论】：