当点击按钮时，我该如何更改其背景颜色？

Question

当点击按钮时，我该如何更改其背景颜色？

3

好的，好的。我知道许多人在Stack Overflow上问了这个问题，但是这些解决方案对我不起作用。那么我的问题很简单：如何使female-av-button和male-av-button的背景URL分别为female-avatar和male-avatar？这是我的代码：

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>

非常感谢您的帮助。

谢谢！

- Sianna Zewdie

请问querySelectorAll和getElementsByTagName方法返回的是什么？在浏览器控制台中应该很清楚地显示错误。 - epascarello

您正在尝试像访问单个元素一样访问HTML集合。getElement >> s << ByClassName - epascarello

也许你可以提供使用URL工作的图像。 - MaxiGui

5个回答

0

或许可以将图像包含在按钮本身而不是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>

The classes are so the background can be swapped and clicking it twice will result in the original image showing! It does work for me, so I hope this helps!

- TheDiamondfinderYT

https://test.braydentowner.repl.co/ <-- 这是这段代码的一个示例 - TheDiamondfinderYT

0

Gypsy.jpg 位置（已上传）

这会奏效：

//CSS
button {
  background: blue;
}

<!-- HTML and JS -->
<!-- Blue to Gypsy.jpg -->
<button id="this" onclick="putimage('https://istack.dev59.com/8oMX9.webp'); //<-- 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>

- Kilgorezer

0

您不必使用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;
}

这样，当单击按钮时，您可以保留图像或更改背景颜色。但是，当在按钮外部单击时，它会返回正常状态。

- NrdyBhu1

1：使用:active而不是:focus。 2：“控制台中是否有任何错误”-CSS 不是编程语言（HTML也不是），因此它不会抛出错误。如果存在JavaScript错误，它不会影响HTML或CSS。 - shreyasm-dev

0

这将使任何具有 female-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";});

- NechesStich

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Dexterians · Accepted Answer

将你的代码修改为：

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>

基本上，我已经从女性头像中删除了你的onclick = ""事件，并在<script>中放置了一个总体监听器。从这里开始，我设置了2个变量（Female和Male），然后使用if语句来检查正在单击什么。根据所单击的内容，它将分别设置/取消设置女性或男性背景，如果两者都没有被单击，则重置两者。

但是，这样做有一个缺点，如果用户单击其他任何地方，它就意味着会重置选择。例如，如果您选择了MALE或FEMALE，然后单击更改用户名，您将看到它取消选择/重置。

要解决这个问题，您可以像这样缩小函数范围；

document.querySelector('.avatars').addEventListener('click', function(e) {...})

这样它只会监听在.avatars盒子内部的点击。

希望这很清楚！如果不是，请告诉我，我会尽力进一步解释！