Question

我已经尽力解决自己的问题但是开始使用一个相当简单的JS脚本时遇到了麻烦。

我正在尝试更改包含指定元素类的“ - ”字符的文本的字体颜色。

这就是我所拥有的：

<html>
<body>
<script>
<!--
function myFunction()
{
var elements = document.getElementsByClassName("example");

for(var i = 0, length = elements.length; i < length; i++)
{
    if(elements[i].textContent.indexOf('-') != -1)
        {
            elements[i].style.color = red;
        }
    } 
}
-->
</script>
<table>
    <tr>
        <td class="example">-100<td>
        <td class="example">100<td>
    </tr>
</table>
</body>
</html>

我做错了什么？

修改这是我使用的最终代码，效果非常好。

<!DOCTYPE html>
<html>
<body>

<script type="text/javascript">
<!--
function myFunction()
{
    var elements = document.getElementsByClassName("example");

    for(var i = 0, length = elements.length; i < length; i++)
    {
        if(elements[i].textContent.indexOf('-') !== -1)
            {
                elements[i].style.color = "red";
            } else
            {
                elements[i].style.color = "green";
            } 
    } 
}
-->
</script>

<table>
<tr>
<td class="example">-100<td>
<td class="example">100<td>
</tr>
</table>
<script type="text/javascript">
<!--
myFunction();
-->
</script>
</body>
</html>

Answer 1

我相信这里总共有三个错误：

根本没有调用该函数。可以像这样照顾：

<body onload="myFunction();">
indexOf的使用不正确。这是正确的方式：

if(elements[i].textContent.indexOf('-') !== -1)
不引用颜色文字。将red放在引号中。

elements[i].style.color = "red";

Answer 2

你还没有打电话给你的js功能＆amp;使用elements[i].textContent.indexOf('-') === 0代替您当前的代码。完整的代码 -

function myFunction()
{
var elements = document.getElementsByClassName("example");

for(var i = 0, length = elements.length; i < length; i++)
{

if(elements[i].textContent.indexOf('-') === 0)
    {

        elements[i].style.color = "red";
    }
 } 
 }

</script>
<table>
<tr>
    <td class="example">-100<td>
    <td class="example">100<td>
</tr>
</table>

JavaScript：更改由类指定的元素的样式

2 个答案: