Onclick 使用标签更改颜色 + 文本

Question

<script language="javascript">

    function changecolor (i)
    {
        if(document.getElementById)
            document.getElementById(i).color = "green";
        else if(document.all)
            document.all[i].color = "red";

        return false;
    }

</script>



<h1>Edit Status: 
    <a href="#" onClick="return changecolor('item1')" class="a">
        <font style="color: #f00;">
            <font id=item1>Disabled</font>
    </a>
</h1><br></font>

我有上面的文本颜色转换器，现在我想以红色创建禁用，当你点击它时，文本会改变并且颜色变成绿色，如果你再次点击它会返回..

那我该怎么做呢？ 该代码仅在我单击一次时才起作用，并且不会更改文本..

感谢你们所有人！

Answer 1

你用了<font> HTML 标签，什么都不推荐。 您应该使用 CSS 来设置 HTML 标签的样式。

你可以在这里阅读 CSS： W3schools - CSS

我认为这个 HTML 对你有好处：

<h1>Edit Status: 
    <a href="#" onClick="return changecolor(this)" style="color: red;">Disabled</a>
</h1>

使用此脚本更改文本和颜色：

<script type="text/javascript">

function changecolor(element){
    if (element.innerHTML == "Disabled"){
        element.innerHTML = "Enabled";
        element.style.color = "green";
    } else {
        element.innerHTML = "Disabled";
        element.style.color = "red";
    }
    return false;
}

</script>

Answer 2

让我们看看你的 HTML 元素的嵌套：

<h1>Edit Status: 
    <a href="#" onClick="return changecolor('item1')" class="a">
        <font style="color: #f00;">
            <font id=item1>Disabled</font>
        </a>   <----- bad
    </h1>      <----- bad
    <br>
</font>        <----- bad

我建议：

1. 删除所有<font>标签，因为这不是 1997 年。:) 使用 CSS
2. 修复元素的嵌套
3. 用您的固定代码更新您的问题

Answer 3

你的支票很奇怪。 我看不到您无法使用document.getelementById的情况。

你想要更像的东西：

function changecolor (controlID)
{
    var obj = document.getElementById(controlID);

    //switch color and change text conditionally:
    if(obj.color === "green"){
        obj.color = "red";
        obj.innerText = "Disabled";
    } else {
        obj.color = "green";
        obj.innerText = "Enabled";
    }
}

但除此之外，您的 HTML 格式不正确，因此您也应该真正考虑纠正它。