Question

我想使用javascript点击按钮更改div的字体颜色。我有两个按钮，＆＃39; Green＆＃34;和＆＃39; Red＆＃39;

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

这是我的div

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

目前字体为红色（默认颜色），但一旦为绿色＆＃39;单击它将变为绿色，当“红色”时，它会变为绿色。单击它将返回红色。

我知道这可能非常简单，但出于某种原因，我无法让它发挥作用：）

如果你知道怎么会非常感激。

Answer 1

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

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

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

Answer 2

如果您开始使用这些内容，那么使用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'); } );

Answer 3

使用jQuery

尝试此操作

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

Answer 4

这是一个链接示例：

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>

对于按钮，它可能是相同的。

Answer 5

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

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

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