單擊時如何更改按鈕的背景？
[英]How do I change the background of a button when clicked?
問題描述
好吧好吧。 我知道很多人在 Stack Overflow 上問過這個問題，但這些解決方案對我不起作用。 所以我的問題很簡單：如何讓女性 av-button 和男性 av-button 分別具有女性頭像和男性頭像的背景 URL？ 這是我的代碼：
body{ margin: 0; padding: 0; box-sizing: border-box; background-color: black; } .avatars{ justify-content: center; margin-left: 15%; display: flex; } .choose-a-user-text{ font-family: 'Luckiest Guy'; font-size: 400%; justify-content: center; } .choose-a-username{ margin-left: 25%; } .user-input{ margin-left: 29%; } .user-input:focus{ outline: none; } .female-av-button{ background: none; border: none; padding: 1px; } .female-av-button:focus{ } .male-av-button{ background: none; border: none; padding: 1px; } .female-av{ background: url('../img/female-avatar-silhouette.png') no-repeat; width: 500px; height: 700px; } .female-av:hover{ background: url('../img/female-avatar.png') no-repeat; width: 500px; height: 700px; } .male-av{ background: url("../img/male-avatar-silhouette.png") no-repeat; width: 500px; height: 700px; } .male-av:hover{ background: url("../img/male-avatar.png") no-repeat; width: 500px; height: 700px; }
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Choose Your Character</title> <link rel="stylesheet" href="css/avatar-page.css"> <link href="https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap" rel="stylesheet"> </head> <body> <div class="choose-a-username"> <h2 class="choose-a-user-text" style="color: #018D94;">CHOOSE A USERNAME</h2> <input class="user-input" type="text" name="" value="" placeholder="username"> </div> <div class="avatars"> <button type="button" onclick="chooseanav()" class="female-av-button" name="button"><div class="female-av"></div></button> <button type="button" class="male-av-button" name="button"><div class="male-av"></div></button> </div> <!-- <div class="avatars"> <div class="silhos"> <img src="img/male-avatar-silhouette.png" class="avatar-silho" alt="male avatar silho"> <img src="img/female-avatar-silhouette.png" class="avatar-silho" alt="female avatar silho"> </div> <div class="avas"> <img src="img/male-avatar.png" class="avatar" alt="male avatar"> <img src="img/female-avatar.png" class="avatar" alt="female avatar"> </div> </div> --> <script type="text/javascript"> // document.getElementsByClassName("user-input").style.height="500px"; function chooseanav() { document.getElementsByClassName('female-av').style.background = "url('../img/female-avatar.png') no-repeat"; } </script> </body> </html>
任何幫助是極大的贊賞。 謝謝！
5 個解決方案
解決方案1
2 已采納 2020-10-28 04:20:52
將您的代碼更改為；
document.getElementsByClassName('female-av')[0].style.background = "url('../img/female-avatar.png') no-repeat";
奇怪的是，與.getElementById()不同，當您使用.getElementsByClassName()您需要索引對象。 我認為這是因為 ID 在類可以很多的情況下是唯一的。
線索在getElement與getElements 。
編輯：要回答您關於點擊外部等的評論，您將不得不稍微更改您的代碼。 檢查下面的代碼片段，如果有任何不合理的地方，請告訴我！
body{ margin: 0; padding: 0; box-sizing: border-box; background-color: black; } .avatars{ justify-content: center; margin-left: 15%; display: flex; } .choose-a-user-text{ font-family: 'Luckiest Guy'; font-size: 400%; justify-content: center; } .choose-a-username{ margin-left: 25%; } .user-input{ margin-left: 29%; } .user-input:focus{ outline: none; } .female-av-button{ background: none; border: none; padding: 1px; } .female-av-button:focus{ } .male-av-button{ background: none; border: none; padding: 1px; } .female-av{ background: url('../img/female-avatar-silhouette.png') no-repeat; width: 500px; height: 700px; } .female-av:hover{ background: url('../img/female-avatar.png') no-repeat; width: 500px; height: 700px; } .male-av{ background: url("../img/male-avatar-silhouette.png") no-repeat; width: 500px; height: 700px; } .male-av:hover{ background: url("../img/male-avatar.png") no-repeat; width: 500px; height: 700px; }
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Choose Your Character</title> <link rel="stylesheet" href="css/avatar-page.css"> <link href="https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap" rel="stylesheet"> </head> <body> <div class="choose-a-username"> <h2 class="choose-a-user-text" style="color: #018D94;">CHOOSE A USERNAME</h2> <input class="user-input" type="text" name="" value="" placeholder="username"> </div> <div class="avatars"> <button type="button" class="female-av-button" name="button"><div class="female-av"></div></button> <button type="button" class="male-av-button" name="button"><div class="male-av"></div></button> </div> <!-- <div class="avatars"> <div class="silhos"> <img src="img/male-avatar-silhouette.png" class="avatar-silho" alt="male avatar silho"> <img src="img/female-avatar-silhouette.png" class="avatar-silho" alt="female avatar silho"> </div> <div class="avas"> <img src="img/male-avatar.png" class="avatar" alt="male avatar"> <img src="img/female-avatar.png" class="avatar" alt="female avatar"> </div> </div> --> <script type="text/javascript"> var femaleAV = document.getElementsByClassName('female-av')[0]; var maleAV = document.getElementsByClassName('male-av')[0]; document.addEventListener('click', function(e) { if (e.target.className == 'female-av') { femaleAV.style.background = "url('../img/female-avatar.png') no-repeat"; maleAV.style.background = ""; } else if (e.target.className == 'male-av') { femaleAV.style.background = ""; maleAV.style.background = "url('../img/male-avatar.png') no-repeat"; } else { femaleAV.style.background = ""; maleAV.style.background = ""; } }); </script> </body> </html>
基本上，我已經從女性 av 中刪除了您的onclick=""事件，並在<script>放置了一個整體偵聽器。 從這里我設置了 2 個變量（女性和男性），然后是一個 if 語句來檢查正在單擊的內容。 根據被點擊的內容，它將分別設置/取消設置女性或男性背景，如果兩者都沒有被點擊，它會重置兩者。
但是，這有一個缺點，如果用戶單擊其他任何地方，則意味着它將重置選擇。 例如，如果您選擇 MALE 或 FEMALE，然后單擊更改您的用戶名，您將看到它取消選擇/重置。
要解決此問題，您可以像這樣縮小功能范圍；
document.querySelector('.avatars').addEventListener('click', function(e) {...})
這樣它只會監聽.avatars框內的點擊。
我希望很清楚！ 如果沒有，請告訴我，我會嘗試進一步解釋！
解決方案2
0 2020-10-15 12:52:07
您不必使用 javascript 來更改它。 您可以直接在 css 中使用 :focus 。
.male-av:focus{
background: url("../img/male-avatar.png") no-repeat;
width: 500px;
height: 700px;
}
.female-av:focus{
background: url('../img/female-avatar.png') no-repeat;
width: 500px;
height: 700px;
}
所以這樣當按鈕被點擊時，你可以保留圖像或改變背景顏色。但在按鈕外部點擊時它會恢復正常。
解決方案3
0 2020-10-15 13:43:06
這將使任何具有類女性-av 的元素在單擊時更改其背景
let fa = document.getElementsByClassName("female-av-button");
for(let i = 0;i<fa.length;i++){
fa[i].addEventListener('click',function(){
this.style.background="url('../img/female-avatar.png') no-repeat";
});
}
如果您只希望一個特定元素具有此行為，請給它一個 id 並使用
document.getElementById("elementID").addEventListener('click',function(){this.style.background="black";});
解決方案4
0 2020-10-27 21:22:31
也許圖像包含在按鈕本身而不是 CSS 中。 然后有一個改變圖像的 JavaScript 函數。
或者（更簡單的選擇）有一個 JS 函數來切換包含新圖像的類和帶有舊圖像的類（舊圖像類已經在那里）。
說...
<html> <style> /* add this to <style> the css (exept the image links) */ .confirm { background: url('https://live.staticflickr.com/7057/7119974123_291cac34b7_b.jpg') no-repeat; } .unclicked { background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/8/84/Flag_of_Tabajd_%281-1_aspect_ratio%29.svg/480px-Flag_of_Tabajd_%281-1_aspect_ratio%29.svg.png') no-repeat; } </style> <script> /*add this to <script> block*/ function change() { var btnImg= document.getElementById("btn") btnImg.classList.toggle("confirm") btnImg.classList.toggle("unclicked") } </script> <div id="Copy this"></div> <button class="unclicked" id="btn" onClick=change()></button> </html>
解決方案5
0 2020-10-31 03:30:31
Gypsy.jpg 位置（已上傳）
這將起作用：
//CSS button { background: blue; }
<!-- HTML and JS --> <!-- Blue to Gypsy.jpg --> <button id="this" onclick="putimage('https://i.stack.imgur.com/8oMX9.jpg'); //<-- paste image here.">Click Me!</button> <script> var putimage = function(i) { // i is image url. document.getElementById("this").style = 'background: url("' + i + '") space !important'; }; </script>
單擊添加待辦事項列表的按鈕時，如何生成具有不同背景顏色的項目？
[英]how can I generate items with different background colors when clicked on a button that add a to do list?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.