使用javascript单击按钮更改div的字体颜色答案

【问题标题】：Change font color of div on click of button using javascript使用javascript单击按钮更改div的字体颜色
【发布时间】：2015-01-19 11:24:09
【问题描述】：

我想通过使用 javascript 单击按钮来更改 div 的字体颜色。我有两个按钮，“绿色”和“红色”。

<button type="button" class="green">Green</button>
<button type="button" class="red">Red</button>

这是我的 div

<div id="timer"></div>

当前字体是红色（默认颜色），但是一旦点击“绿色”，它就会变成绿色，点击“红色”时，它又会变回红色。

我知道这可能很简单，但由于某种原因我无法让它工作:)

如果你知道如何将不胜感激。

【问题讨论】：

【解决方案1】：

如果您开始使用这些东西，如果您使用 jQuery 库，您将会轻松很多。

只需在文档的<head> 中添加以下代码即可安装 jQuery 并让您访问$ 函数：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

现在你的解决方案应该是这样的：

$('#green').click( function() { $('#timer').css('color','green'); } );
$('#red').click( function() { $('#timer').css('color','red'); } );

【讨论】：

【解决方案2】：

用 jQuery 试试这个

$('.green').click( function() { $('#timer').css('color','green'); } );
$('.red').click( function() { $('#timer').css('color','red'); } );

【讨论】：

【解决方案3】：

这是一个带有链接的示例：

Javascript：

<script language="javascript">
function changecolor(color) {

document.getElementById('timer').style.color=color;

}

</script>

您的链接：

<a href="javascript:changecolor('#000000');">Black</a> 
<a href="javascript:changecolor('#FF0000');">Red</a>

你的 div ：

<div id="timer" style="font-weight:bold; font-size:10px">Timer</div>

对于按钮，可能是一样的。

【讨论】：

【解决方案4】：

我认为在没有 Jquery 的情况下更改颜色是最简单的解决方案：http://jsfiddle.net/8jay6r3n/

只需将onclick 事件添加到按钮，如下所示：onclick="document.getElementById('timer').style.color = 'red'"

如果你想使用jQuery，比这里的例子http://jsfiddle.net/8jay6r3n/2/ 您可以使用inline style 或添加class 来更改文本颜色。

【讨论】：

【解决方案5】：

如果您使用的是 jquery，那么实现起来会容易得多。您可以在 js 文件或 <script> 标签中使用该函数。

   $('#timer').css('color','green'); 
});
$('#red').click( function() {
   $('#timer').css('color','red'); 
});

如果您想使用纯 JavaScript，请使用“addEventListener”或“click”作为 click 事件，然后在要应用 css 的每个标签/元素中添加样式。

【讨论】：