Переключение между двумя цветами фона веб-страницы с помощью CSS Switch
мой код работает нормально. Мне просто нужно переключаться между двумя цветами: белым и черным. Мне нужна помощь, чтобы изменить код JavaScript, чтобы включить переключатель между белым и черным цветами. -CSS
<style>
h1 {
color: green;
}
/* toggle in label designing */
.toggle {
float: none;
position : fixed ;
display : inline-block;
width: 80px;
height: 38px;
background-color: grey;
border-radius: 30px;
border: 2px solid white;
top: 6px;
left: 896px;
}
/* After slide changes */
.toggle:after {
content: '';
position: absolute;
width: 38px;
height: 35px;
border-radius: 50%;
background-color: white;
top: -1px;
left: 0px;
transition: all 0.5s;
}
/* Toggle text */
p {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
/* Checkbox cheked effect */
.checkbox:checked + .toggle::after {
left : 38px;
}
/* Checkbox cheked toggle label bg color */
.checkbox:checked + .toggle {
background-color: #5ad94d;
}
/* Checkbox vanished */
.checkbox {
display : none;
}
</style>
-HTML
<input class='checkbox' id='switch' type='checkbox'/>
<label class='toggle' for='switch'>
<p>ON OFF</p>
</label>
-Javascript
<script>
document.getElementById("switch").addEventListener('click', function(){
document.getElementsByClassName("mainWrapper fullWidth")[0].style.backgroundColor = document.getElementById("switch").toggle ? "white" : "black";
});
</script>
снова мой код работает нормально. Мне просто нужно переключаться между двумя цветами: белым и черным. Мне нужна помощь, чтобы изменить код JavaScript, чтобы включить переключатель между белым и черным цветами. Любые идеи ??? благодарить!
Обратите внимание, что в предоставленном вами HTML-коде нет элемента HTML с классом mainWrapper...
@PraneetDixit это главная страница моего веб-сайта, на ней много кода, важной частью является изменение цвета фона.
@HereticMonkey, это главная страница моего веб-сайта, на ней много кода, важной частью является изменение цвета фона.
Почитайте минимальный воспроизводимый пример - акцент на завершение.
@ user14775523, значит, вам нужно изменить цвет фона для каждого элемента с классом mainWrapper?
В любом случае проблема в том, что вы используете getElementsByClassName так, как будто он возвращает один элемент. Это не так, как объясняет ссылка в моем первом комментарии.
document.getElementsByClassName возвращает коллекцию/массив, поэтому вам нужно выполнить их итерацию — или просто использовать jquery (поскольку вы пометили [jquery]) — $("#tog-bg").click(function() { $(".mainWrapper").css("background-color", this.checked ? "white" : "black")})@freedomn-m моя основная упаковка .mainWrapper{margin:0 auto;background-color:#fff;box-shadow:0 0 10px 3px rgba(0,0,0,0.1)}
Можете ли вы предоставить свой код mainWrapper?
@HereticMonkey мой mainWrapper .mainWrapper{margin:0 auto;background-color:#fff;box-shadow:0 0 10px 3px rgba(0,0,0,0.1)} когда я меняю цвет фона, он отлично работает, мне просто нужно, чтобы кнопка делала это, ты меня чувствуешь?
Альтернативный вариант ответа: Как получить только один элемент по имени класса? В итоге: используйте document.getElementsByClassName("mainWrapper")[0].style...
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
getElementByClassName возвращает коллекцию
Так что код должен быть
//add [0] to both getElementByClassName
document.getElementsByClassName("mainWrapper")[0].style.backgroundColor
Также здесь нет класса mainWrapper, поэтому вы должны создать родительский div с классом mainWrapper
Я знаю это, но ваш код не предназначен для кнопки, которая будет ПЕРЕКЛЮЧАТЬСЯ между белым и черным цветом для mainWrapper, когда пользователь нажимает ее.
@user14775523 user14775523 вы должны быть в состоянии адаптировать то, что было здесь предоставлено (что соответствует моему комментарию и связанному вопросу), в свой код ... нужно просто добавить [0] в двух местах вашего кода, чтобы заставить его работать ...
@freedomn-m я тупой, извини, я не знаю, как это сделать
@user14775523 user14775523 достаточно честно - ваш код имеет это дважды document.getElementsByClassName("mainWrapper ").style.backgroundColor = вы меняете оба на это document.getElementsByClassName("mainWrapper ")[0].style.backgroundColor = и все готово (вы можете скопировать этот комментарий в текстовый редактор, а затем выровнять код, чтобы увидеть разницу - обертка в этом комментарий может скрыть разницу)
getElementsByClassName() возвращает html collection object. Это коллекция. Если вы хотите найти первый элемент с классом, вам нужно использовать индекс [0], как показано ниже:
document.getElementById("tog-bg").addEventListener('click', function(){
document.getElementsByClassName("mainWrapper")[0].style.backgroundColor = document.getElementById("tog-bg").checked ? "white" : "black";
});
Если вы хотите сделать это для всех элементов с указанным классом, вы можете зациклить его, как показано ниже:
document.getElementById("tog-bg").addEventListener('click', function(){
for(let i = 0; i < document.getElementsByClassName("mainWrapper").length; i++){
document.getElementsByClassName("mainWrapper")[i].style.backgroundColor = document.getElementById("tog-bg").checked ? "white" : "black";
}
});
Я использую тернарный оператор вместо условия if else в приведенном выше фрагменте. Кроме того, я заменил событие change на событие click в слушателе.
ваш код сработал!! но мне нужно переключаться между цветами при нажатии кнопки@Praneet Dixit
@ user14775523 Что вы подразумеваете под «переключением между цветами»? Вы хотите изменить цвет текста?
НЕТ цветов фона, белый и черный
Это сработало для меня в firefox (не в стиле, а функционально):
document.getElementById("tog-bg").onclick = function(){
var e;
if ( (e = document.getElementById("tog-bg")).hasAttribute('checked')) {
var w = document.getElementsByClassName("mainWrapper ");
for(i=0;i<w.length;++i)
{
w[i].style.backgroundColor = "black";
}
e.removeAttribute('checked');
} else {
var w = document.getElementsByClassName("mainWrapper ");
for(i=0;i<w.length;++i)
{
w[i].style.backgroundColor = "white";
}
e.setAttribute('checked','');
}
};
Где твой
mainWrapper?