#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 «?