單擊按鈕時更改背景顏色

我是一位編程新手，我正在處理一件小事。當我點擊這個按鈕時，我想要改變頁面的背景。由於我是編程新手，我不知道使用這種方法的正確方法。任何建議都會有幫助。這是我在HTML &到目前爲止。單擊按鈕時更改背景顏色

<div class="wrapper> 
<p>Click on the button to see the magic happen!</p> 
<input class="button" type="button" value="Click Me">

然後在CSS我有以下幾點：

.wrapper{ 
text-align: center; 
} 
.button{ 
display: inline-block; 
padding: 15px 25px; 
font-size: 24px; 
cursor: pointer; 
text-align: center; 
text-decoration: none; 
outline: none; 
color: #fff; 
background-color: #EE835A; 
border: none; 
border-radius: 15px; 
box-shadow: 0 9px #999; 
} 
.button:hover {background-color: #EE8354A} 

.button:active { 
background-color: #4A6273; 
box-shadow: 0 5px #F68B8B; 
transform: translateY(4px); 
}

來源

2017-03-13 A.McC

[JavaScript的上點擊更改背景顏色]的可能的複製（HTTP：/ /stackoverflow.com/questions/31089414/javascript-ch ange-background-color-on-click） –

我剛剛在幾小時前回答了一個類似的問題。你可能想看看[這裏]（http://stackoverflow.com/a/42752735/2341603）。 –

花時間去做，你有幾件事情錯了，看看，看看。這也是一個純粹的CSS解決方案。

懸停顏色中有太多字符。應該有6個不是7.我用黑色＃000000代替它，因爲我不確定你想要什麼顏色。

此外，添加一個微妙的過渡是一個很好的外觀。

transition: .3s

.button:hover {background-color: #000000; transition: .3s} 
 

 
body {background-color: white;} 
 

 
.button:active { 
 
background-color: #4A6273; 
 
box-shadow: 0 5px #F68B8B; 
 
transform: translateY(4px); 
 
} 
 

 
.wrapper{ 
 
text-align: center; 
 
} 
 
.button{ 
 
display: inline-block; 
 
padding: 15px 25px; 
 
font-size: 24px; 
 
cursor: pointer; 
 
text-align: center; 
 
text-decoration: none; 
 
outline: none; 
 
color: #fff; 
 
background-color: #EE835A; 
 
border: none; 
 
border-radius: 15px; 
 
box-shadow: 0 9px #999; 
 
transition: .3s; 
 
}

<div class="wrapper"> 
 
<p>Click on the button to see the magic happen!</p> 
 
<button class="button" onclick="document.body.style.backgroundColor = 'green';"></button>

來源

2017-03-13 01:00:28

一個簡單的jQuery腳本將實現這一點：

$('.button').click(function(e){ 
    e.preventDefault(); 
    $('body').css({'background':'red'}); 
});

https://jsfiddle.net/f1rkyxs7/2/

來源

2017-03-13 01:08:29 symlink

OP要求js，css或html而不是jquery。 –

@norcaljohnny JQuery幾乎是JavaScript的代名詞。新手可能會覺得更容易開始。除非他們專門說沒有JQuery，否則我沒有看到教它的錯誤。 – symlink

我同意jquery是一個很好的功能，並且更喜歡它，但是可以在不加載額外腳本的情況下在CSS中完成顏色更改等簡單操作。但我同意。 –

單擊按鈕時更改背景顏色

回答

相關問題