使用javascript單擊按鈕更改div的字體顏色

Question

我想在使用 javascript 單擊按鈕時更改 div 的字體顏色。 我有兩個按鈕，“綠色”和“紅色”。

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

這是我的 div

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

當前字體是紅色（默認顏色），但是一旦點擊“綠色”，它就會變成綠色，當點擊“紅色”時，它會變回紅色。

我知道這可能很簡單，但由於某種原因我無法讓它工作:)

如果您知道如何將不勝感激。

Answer 1

我認為這是在沒有 Jquery 的情況下更改顏色的最簡單解決方案： http : //jsfiddle.net/8jay6r3n/

只需像這樣將onclick事件添加到按鈕： onclick="document.getElementById('timer').style.color = 'red'"

這里有一些關於它的文檔： http : //www.w3schools.com/js/js_htmldom_css.asp

如果你想使用 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，請為單擊事件使用“addEventListener”或“click”，然后在要應用 css 的每個標簽/元素中添加樣式。