Как изменить цвет фона фона с помощью переключателя?

-2

Я пытаюсь изменить пару цветов фона в <body> моего сайта, но я хочу начать с изменения только тела background-color. Я использую checkbox/switch для управления цветом фона при переключении, но он не работает, когда я нажимаю на него.
Хотя, когда я удаляю скрипт javascript, работает переключатель .Как изменить цвет фона фона с помощью переключателя?

Вот что у меня есть, проверить это для себя:

$(function() { 
 
     $('#toggle-event').click(function() { 
 
     $('body').toggleClass('nightmode'); 
 
    }) 
 
    });

.nightmode { 
 
    background-color: red; 
 
} 
 
.slow{ 
 
\t transition: left 0.7s; 
 
    -webkit-transition: left 0.7s; 
 
} 
 

 
.cmn-toggle { 
 
    position: absolute; 
 
    margin-left: -9999px; 
 
    visibility: hidden; 
 
} 
 
.cmn-toggle + label { 
 
    display: block; 
 
    position: relative; 
 
    cursor: pointer; 
 
    outline: none; 
 
    user-select: none; 
 
} 
 

 

 

 
input.togglecss + label { 
 
    padding: 2px; 
 
    width: 85px; 
 
    height: 25px; 
 
    background-color: #dddddd; 
 
    border-radius: 60px; 
 
} 
 
input.togglecss + label:before, 
 
input.togglecss + label:after { 
 
    display: block; 
 
    position: absolute; 
 
    top: 1px; 
 
    left: 1px; 
 
    bottom: 1px; 
 
    content: ""; 
 
} 
 
input.togglecss + label:before { 
 
    right: 1px; 
 
    background-color: #f1f1f1; 
 
    border-radius: 60px; 
 
    transition: background 0.4s; 
 
} 
 
input.togglecss + label:after { 
 
    width: 25px; 
 
    background-color: #fff; 
 
    border-radius: 100%; 
 
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); 
 
    transition: margin 0.4s; 
 
} 
 
input.togglecss:checked + label:before { 
 
    background-color: #8ce196; 
 
} 
 
input.togglecss:checked + label:after { 
 
    margin-left: 65px; 
 
}

 <div class="switch"> 
 
      <input id="cmn-toggle toggle-event" class="cmn-toggle togglecss" type="checkbox" data-toggle="toggle" data-style="slow"> 
 
      <label for="cmn-toggle"></label> 
 
     </div>

Любая помощь будет очень признателен, спасибо большое!

источник

2016-03-10 Graphicoding

Всего головы, вы не должны назначить несколько 'id' значения - я не уверен, если это будет вызывать проблемы, но вы не должны делать это: http://stackoverflow.com/questions/192048/can-an-html-element-have-multiple-ids – brod

Идентификатор в вашем html не совпадает с идентификатором вашего Javascript. – nnnnnn

также, если у вас есть флажок, лучше использовать событие change', чем щелчок' – guradio

Я думаю, что главная проблема в коде здесь:

.cmn-toggle { 
    position: absolute; 
    margin-left: -9999px; 
    visibility: hidden; 
}

ничего не вызовет JavaScript.

И еще одна проблема заключается в том, что brod сказал, что существует несколько значений id. Я изменил те, и он работает.

Example

источник

2016-03-10 04:31:23

Да, спасибо, что указали, что код был взят с другого сайта, но слева от поля: -9999px; Мне также кажется смешным. Главная проблема для меня заключалась в «множественном идентификаторе». Я сохранил один идентификатор, и все сработало. – Graphicoding

Вы всегда рады! Рад помочь. :) –

Попробуйте следующий пример

$(".my").click(function() { 
 
    $(this).toggleClass("green"); 
 
});

.my { width: 50px; height: 50px; background-color: #336699; } 
 
.my:hover, .place.green { background-color: #00cc00; }

<div class="my"> 
 
</div>

источник

2016-03-10 03:59:03 Codeone

Непонятно, что вы предлагаете здесь. – nnnnnn

это должен быть пример. цвет фона тела с переключением? – Codeone

, пожалуйста, нажмите и покажите вывод – Codeone

-1

HTML

<select name="my-select" class="js-my-select"> 
    <option value="nothing" selected>Select Color</option> 
    <option value="red">Red</option> 
    <option value="orange">Orange</option> 
    <option value="yellow">Yellow</option> 
    <option value="blue">Blue</option> 
    <option value="green">Green</option> 
</select> 

<div class="js-my-image red"></div> 
<div class="js-my-image orange"></div> 
<div class="js-my-image yellow"></div> 
<div class="js-my-image blue"></div> 
<div class="js-my-image green"></div>

CSS

div { 
    display: none; 
    height: 50px; 
    width: 50px; 
} 
.red { 
    background-color: red; 
} 
.orange { 
    background-color: orange; 
} 
.yellow { 
    background-color: yellow; 
} 
.green { 
    background-color: green; 
} 
.blue { 
    background-color: blue; 
}

$(function() { 
    var $select = $('.js-my-select'), 
     $images = $('.js-my-image'); 

    $select.on('change', function() { 
    var value = '.' + $(this).val(); 
    $images.show().not(value).hide(); 
    }); 
});

источник

2016-03-10 04:03:25

Я просто сделал более простую функцию (без jQuery), которая переключает цвета фона в событии «onchange» на коммутаторе. Имена классов/идентификаторов также были обновлены (и ненужные удалены).

function changeit() { 
 

 
var shortget = document.getElementsByTagName("body")[0]; 
 
var aaa = shortget.style.backgroundColor; 
 
    
 
if (aaa == "black") { 
 
shortget.style.backgroundColor = "lavender"; 
 
} else { 
 
shortget.style.backgroundColor = "black"; 
 
} 
 
    
 
}

body { 
 
    background-color:lavender; 
 
    transition: all 1s; 
 
    -webkit-transition: all 1s; 
 
} 
 

 
.switcher { 
 
    position: absolute; 
 
    margin-left: -9999px; 
 
    visibility: hidden; 
 
} 
 

 
.switcher + label { 
 
    display: block; 
 
    position: relative; 
 
    cursor: pointer; 
 
    outline: none; 
 
    user-select: none; 
 
} 
 

 
input.switcher + label { 
 
    padding: 2px; 
 
    width: 85px; 
 
    height: 25px; 
 
    background-color: transparent; 
 
    border-radius: 60px; 
 
} 
 

 
input.switcher + label:before, 
 
input.switcher + label:after { 
 
    display: block; 
 
    position: absolute; 
 
    top: 1px; 
 
    left: 1px; 
 
    bottom: 1px; 
 
    content: ""; 
 
} 
 

 
input.switcher + label:before { 
 
    right: 1px; 
 
    background-color: black; 
 
    border-radius: 60px; 
 
    transition: background 0.4s; 
 
} 
 

 
input.switcher + label:after { 
 
    width: 25px; 
 
    background-color: #fff; 
 
    border-radius: 100%; 
 
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); 
 
    transition: margin 0.4s; 
 
} 
 

 
input.switcher:checked + label:before { 
 
    background-color: lavender; 
 
} 
 

 
input.switcher:checked + label:after { 
 
    margin-left: 65px; 
 
}

<div class="switch"> 
 
<input id="switcher" class="switcher" type="checkbox" onchange="changeit()"> 
 
<label for="switcher"></label> 
 
</div>

источник

2016-03-10 04:09:17

Я должен сказать, что это очень большой и надежный пример. Благодарю. – Graphicoding

< =========================== HTML КОД ======= ============================>

<div id="div1">CSS Pseudo Classes (not cross browser) :hover :active</div> 
<div id="div2">jQuery Click to CSS</div> 
<div id="div3">jQuery Click to CSS</div> 
<div id="div4">jQuery Click to Toggle</div> 
<div id="div5">jQuery Mousedown/MouseUp</div> 
<div id="div6">jQuery Toggle</div>

< ============= ============== CSS-КОД ====================================================================== =>

div { 
    background-color: green; 
    border: 3px groove; 
    cursor: pointer; 
    margin: 1em; 
    padding: 1em; 
    text-align: center; 
} 
.back-green { background-color: green; } 
.back-red { background-color: red; } 
#div1:hover { 
    background-color: yellow; 
} 
#div1:active { 
    background-color: red; 
}

< ================= JQuery CODE =================== ================>

$("#div2").on("click", function() { 
    $(this).css("background-color", "red"); 
}); 

$("#div3").on("click", function() { 
    $(this).css({ backgroundColor: "red" }); 
}); 

$("#div4").on("click", function() { 
    $(this).toggleClass('back-red'); 
}); 

$("#div5").on("mousedown", function() { 
    $(this).toggleClass('back-red'); 
}) 
.on("mouseup", function(e) { 
    $(this).toggleClass('back-red'); 
}); 

$("#div6").toggle(function() { 
    $(this).css("background-color", "red"); 
}, 
function() { 
    $(this).css("background-color", ""); 
});

здесь работает скрипку для него: Fiddle :)

Теперь здесь я меняюсь цвет несколько DIV, но вы можете использовать его для изменения цвета фона вашего сайта ....

& Благодаря Приветствия

источник

2016-03-10 04:20:37

Отличные примеры, brotha. Я обязательно буду использовать их позже. – Graphicoding

благодарит @Graphicoding, и если вы сочтете это полезным, примите его в качестве ответа :) –

Как изменить цвет фона фона с помощью переключателя?

ответ

Смежные вопросы