Javascript 如何使用按钮更改其他按钮的样式？_Javascript_Css_Dom_Button_Addeventlistener

Javascript 如何使用按钮更改其他按钮的样式？

javascript css dom button

Javascript 如何使用按钮更改其他按钮的样式？,javascript,css,dom,button,addeventlistener,Javascript,Css,Dom,Button,Addeventlistener,所以我想要一个动态图像库。单击“风景”按钮时，另一个高亮显示的按钮将其样式更改为默认，而我单击的“风景”按钮将更改为单击的样式。我希望我单击的每个按钮都将单击的任何按钮重置为默认值，并将我单击的按钮更改为新的单击样式我正在尝试使用事件侦听器，为每个单击以重置和设置样式的按钮提供函数 Structures是处于单击状态的默认按钮。所以我在css中设置了它的样式。但是当我点击抽象按钮时，它应该将结构化按钮更改为默认样式，并将其自身更改为点击样式，为什么不更改呢 html <!DOCTYPE

所以我想要一个动态图像库。单击“风景”按钮时，另一个高亮显示的按钮将其样式更改为默认，而我单击的“风景”按钮将更改为单击的样式。我希望我单击的每个按钮都将单击的任何按钮重置为默认值，并将我单击的按钮更改为新的单击样式

我正在尝试使用事件侦听器，为每个单击以重置和设置样式的按钮提供函数

Structures是处于单击状态的默认按钮。所以我在css中设置了它的样式。但是当我点击抽象按钮时，它应该将结构化按钮更改为默认样式，并将其自身更改为点击样式，为什么不更改呢

html 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <section id="painting-buttons">
        <div class="container">
            <div class="buttons">
                <button id="structures" 
                        class="button-solid black-button" onclick="location.href='#'" 
                        type="button">
                        Structures
                </button>
                <button id="abstract" 
                        class="button-solid black-button" 
                        onclick="location.href='#'" 
                        type="button">
                        Abstract
                </button>
                <button id="oil" 
                        class="button-solid black-button" 
                        onclick="location.href='#'" 
                        type="button">
                        Oil
                </button>
                <button id="landscapes" 
                        class="button-solid black-button" 
                        onclick="location.href='#'" 
                        type="button">
                        Landscapes
                </button>
            </div>
        </div>
    </section>
    <script src="app.js"></script>
</body>
</html>

您是否在ccs样式中尝试了伪类“：focus”？例如：

从概念上讲，您使用的是切换状态。因此，您应该能够将其减少为打开和关闭

您可以将这两种样式包装成两个类（缩写）

然后需要将元素移动到数组中

'var structures = document.getElementById("structures");
 var abstract = document.getElementById("abstract");
 var oil = document.getElementById("oil");
 var landscapes = document.getElementById("landscapes");'


 var butts = [oil, structures, abstract, etc];

并添加一个着色事件

for(var i = 0; i < butts.length; i += 1){
buttons[i].addEventListener('click', function (e) {
    e.target.toggleClass('on');
});

for（变量i=0；i


}
您只需告诉单击事件中未出现的所有按钮即可切换其
州
按钮。切换类（“关闭”） 是的，但是当页面加载时，我希望“结构”已经被聚焦。有没有办法做到这一点？问题是，当你点击屏幕上的其他任何地方时，按钮不再聚焦，因此“关闭”类将已经在按钮上，而“打开”类将被打开和关闭？
         .button:focus{
                        color: green;
                }

`.on{background:#31AECE;
 .off{backround:transparent;`

'var structures = document.getElementById("structures");
 var abstract = document.getElementById("abstract");
 var oil = document.getElementById("oil");
 var landscapes = document.getElementById("landscapes");'


 var butts = [oil, structures, abstract, etc];

for(var i = 0; i < butts.length; i += 1){
buttons[i].addEventListener('click', function (e) {
    e.target.toggleClass('on');
});