#javascript #button #toggle
#javascript #кнопка #переключить
Вопрос:
Я хочу иметь кнопку, которая переключает изменение стиля на моем сайте, но стиль не изменится при втором нажатии. это мой html:
<button type="button" onclick="stychange()" name="stybut" id="stybut" value="off" >Style Change </button>
это мой js:
function stychange(){
if (button.value=="off"){
button.value="on";
document.body.style.backgroundColor="#00FF00";
document.getElementById('ad').style.borderStyle="double";
}
else {
button.value="off";}
}
Комментарии:
1. Стили не меняются обратно, потому что вы не написали никакого кода для этого в своем
else {}блоке
Ответ №1:
Вы устанавливаете класс, затем переключаете этот класс, вот как вы переключаете стиль
document.getElementById('stybut').addEventListener('click', function() {
this.classList.toggle('changed');
}); #stybut { background : #00FF00; border: 2px double red }
#stybut.changed { background : red; border: 2px double green } <button type="button" name="stybut" id="stybut">Style Change</button> Комментарии:
1. итак, если я пытаюсь изменить стили более чем одного элемента с помощью одной и той же кнопки, я должен просто поместить все стили в измененный класс?
2. например, я хочу, чтобы кнопка меняла цвет шрифта, размер, фон и стили границ страницы.
3. Тогда класс был бы идеальным, вместо того, чтобы менять каждый стиль с помощью javascript
4. так что, может быть, я мог бы создать класс, у которого есть альтернатива для body, а затем поместить туда все новые стили?
5. Конечно, если это то, чего ты хочешь?