Блог

Главная - Вопросы по программированию - Изменить цвет фона в div, используя javascript

Изменить цвет фона в div, используя javascript

#javascript #html #css

#javascript #HTML #css

Вопрос:

Я просто хотел, чтобы кнопка меняла некоторые цвета. Например, у меня есть фон в «обернутом» 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";

}

Комментарии:

1. Можете ли вы прикрепить свой полный фрагмент?

2. document.getElementById(«wrap»).style.background = «white»; — Это правильно

3. Как вы вызываете changeColors() ?

4. Вы пробовали document.getElementById(«wrap»).style.backgroundColor = «white»?

5. я вызываю в теле: <кнопка onclick=»changeColors()»>изменить</button>

Ответ №1:

Если вы меняете только стили, лучше добавлять / удалять классы вместо использования полностью 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>

Ответ №2:

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

Комментарии:

1. Не работает:/, может быть, что-то не так со мной, вызывающим это? <кнопка onclick=»changeColors()»>изменить</button>

2. Есть ли сообщение об ошибке? Вы изменили «… style.background» на … style.background Color «?