javascript 使用javascript单击按钮更改div的字体颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27059263/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change font color of div on click of button using javascript
提问by user3594463
I want to change the font color of my div on the click of a button using javascript. I have two buttons, 'Green" and 'Red'.
我想在使用 javascript 单击按钮时更改 div 的字体颜色。我有两个按钮，“绿色”和“红色”。
<button type="button" class="green">Green</button>
<button type="button" class="red">Red</button>
This is my div
这是我的 div
<div id="timer"></div>
currently the font is red (default color), but once 'green' is clicked it will go green and when 'red' is clicked it will go back to red.
当前字体是红色（默认颜色），但是一旦点击“绿色”，它就会变成绿色，当点击“红色”时，它会变回红色。
I know this is probably very simply but for some reason I can't get it to work :)
我知道这可能很简单，但由于某种原因我无法让它工作:)
If you know how would be greatly appreciated.
如果您知道如何将不胜感激。
回答by demo
I think it's the simplest solution to change color without Jquery : http://jsfiddle.net/8jay6r3n/
我认为这是在没有 Jquery 的情况下更改颜色的最简单解决方案：http: //jsfiddle.net/8jay6r3n/
Just add onclickevent to button like this : onclick="document.getElementById('timer').style.color = 'red'"
只需onclick像这样向按钮添加事件：onclick="document.getElementById('timer').style.color = 'red'"
Some documentation about it exist here : http://www.w3schools.com/js/js_htmldom_css.asp
这里有一些关于它的文档：http: //www.w3schools.com/js/js_htmldom_css.asp
If you want to use jQuery, than here example http://jsfiddle.net/8jay6r3n/2/You can use inline styleor add classto change color of text.
如果你想使用 jQuery，比这里的例子http://jsfiddle.net/8jay6r3n/2/你可以使用inline style或添加class来改变文本的颜色。
回答by Tom Rees
If you're getting started with this stuff, you will have a much easier time if you use the jQuerylibrary.
如果您刚开始使用这些东西，那么如果您使用jQuery库，您将有更轻松的时间。
Simply add the following code inside the <head>of your document to install jQuery and give you access to the $function:
只需在<head>您的文档中添加以下代码即可安装 jQuery 并允许您访问该$功能：
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Now your solution should be something like:
现在你的解决方案应该是这样的：
$('#green').click( function() { $('#timer').css('color','green'); } );
$('#red').click( function() { $('#timer').css('color','red'); } );
回答by Tom Rees
try this using jQuery
使用 jQuery 试试这个
$('.green').click( function() { $('#timer').css('color','green'); } );
$('.red').click( function() { $('#timer').css('color','red'); } );
回答by BobyCode
This is a example with links :
这是一个带有链接的示例：
the Javascript :
Javascript ：
<script language="javascript">
function changecolor(color) {
document.getElementById('timer').style.color=color;
}
</script>
Your links :
您的链接：
<a href="javascript:changecolor('#000000');">Black</a>
<a href="javascript:changecolor('#FF0000');">Red</a>
Your div :
你的 div ：
<div id="timer" style="font-weight:bold; font-size:10px">Timer</div>
For buttons, its probably the same.
对于按钮，它可能是一样的。
回答by Pallavi
If you are using jquery then it will be lot easier to implement. You can the function in either js file or <script>tag.
如果您使用的是 jquery，那么实现起来会容易得多。您可以在 js 文件或<script>标签中使用该函数。
$('#timer').css('color','green');
});
$('#red').click( function() {
$('#timer').css('color','red');
});
And if you want to use pure javascript, use either "addEventListener" or 'click' for the click event and then add styling in each tag/element you want to apply css on.
如果您想使用纯 javascript，请为单击事件使用“addEventListener”或“click”，然后在要应用 css 的每个标签/元素中添加样式。
