更改文本颜色 onclick答案

【问题标题】：Changing text color onclick更改文本颜色 onclick
【发布时间】：2010-01-19 05:34:12
【问题描述】：

我是 JavaScript 新手。我使用 JavaScript 开发了一个页面，当我选择一种颜色时，它会作为背景应用于整个页面。

我想开发一个只能更改文本颜色的页面。它应该被改变（从红色到绿色或类似的东西），但页面不应该被刷新，只有选定的内容或文本颜色应该被改变。

任何人都可以帮助我吗？关于如何开发它的任何想法？提前致谢。

【问题讨论】：

【解决方案1】：

我认为 Sarfraz 对答案的重写是这样的：

<script>

    document.getElementById('change').onclick = changeColor;   

    function changeColor() {
        document.body.style.color = "purple";
        return false;
    }   

</script>

您要么必须将此脚本放在页面底部，就在结束 body 标记之前，要么将处理程序分配放在名为 onload 的函数中 - 或者如果您使用的是 jQuery，则可以使用非常优雅的 @987654322 @

请注意，当您以这种方式分配事件处理程序时，它会将功能从您的 HTML 中移除。另请注意，您将其设置为等于函数名称 - no ()。如果您执行了onclick = myFunc();，则该函数将在设置处理程序时实际执行。

我很好奇——您知道如何编写脚本更改背景颜色，但不会更改文本颜色？奇怪:)

【讨论】：

我试图做的是通过调用 .css 页面来更改文本颜色。我面临的问题是 ..我创建了三个不同的 .css 页面。但是当单击第一个 .css 页面时。我调用的css页面正在显示，但其他人没有。我也调用了所有三个.css文件..
@patel 包含在原始问题中会非常有用。你应该编辑它以包含那个重要的小花絮。

【解决方案2】：

做这样的事情：

<script>
function changeColor(id)
{
  document.getElementById(id).style.color = "#ff0000"; // forecolor
  document.getElementById(id).style.backgroundColor = "#ff0000"; // backcolor
}
</script>

<div id="myid">Hello There !!</div>

<a href="#" onclick="changeColor('myid'); return false;">Change Color</a>

【讨论】：

-1 对于document.getElementById(id) 的低效使用和有问题的事件注册
@Justin：如果你能解释一下那里的效率低下，那就太好了？如果我能学习，我会很棒。请问有什么链接可以提供吗？
最好尽量避免走动 DOM，因此您需要尽可能少地调用像 document.getElementById 这样的方法。至于事件注册，通常认为将表示和逻辑混合在一起是不好的形式。更多信息可以在这里阅读：quirksmode.org/js/events_early.html
@Justin：我相信如果我是你，我不会投反对票，我会简单地留下评论让你知道这种方式效率低下。请注意，这不是一个错误。谢谢
更改鼠标悬停时的字体颜色我可以像 dis.. 这样写脚本吗？？任何建议请..
green ---- 红色

【解决方案3】：

function func()
            {
                document.getElementById('text').style.fontSize='50px';
                document.getElementById('text').style.color='blue';
            }

<p id="text" onclick="func()">Font and color will be changed</p>
<button type="button" onclick="func()">Click here!</button>

【讨论】：

【解决方案4】：

   <p id="text" onclick="func()">
    Click on text to change
</p>
<script>
function func()
{
    document.getElementById("text").style.color="red";
    document.getElementById("text").style.font="calibri";
}
</script>

【讨论】：