Блог

Я просто хотел, чтобы кнопка меняла некоторые цвета. Например, у меня есть фон в «обернутом» div и некоторые границы в других подразделениях.

 #wrap {

    width:100vw;
    height: 100vh;

    margin:0 auto;

    font: italic bold 15px arial, sans-serif;

    background-color: rgb(0, 14, 51);

    overflow-y: scroll;

    background-size: cover;

}
  

     #middleBarExtra{


        margin-top: 130px;

        height: 1px;
        width:100%;

        border: solid 5px rgb(200, 64, 235);

        border-radius: 30px;

}
  

Как я могу изменить цвет фона в «wrap» и цвет границы в «midlleBarExtra» с помощью функции в javascript?

Я пробовал это, но не сработало:

 function changeColors(){
    
    document.getElementById("wrap").style.background = "white";

}
  

Если вы меняете только стили, лучше добавлять / удалять классы вместо использования полностью js.

 function changeColors(){
    document.getElementById("wrap").classList.toggle("new-styles");
}  

 #wrap {
   width:100vw;
   height: 100vh;
   margin:0 auto;
   background: rgb(0, 14, 51);
}
#middleBarExtra{
    margin-top: 130px;
    height: 1px;
    width:100%;
    border: solid 5px rgb(200, 64, 235);
    border-radius: 30px;
}
#wrap.new-styles {
   background: rgb(255,255,255);
}
.new-styles #middleBarExtra {
   border-color: red;
}  

 <button onclick="changeColors()">Change</button>

<div id="wrap">
   <div id="middleBarExtra"></div>
</div>  

 document.getElementById("wrap").style.backgroundColor = "white";