Я пытаюсь настроить страницу с несколькими кнопками, все из которых меняют цвет с красного на зеленый, когда задача завершена. Однако я хочу, чтобы они могли переключиться обратно, если будет сделана ошибка. Пока у меня есть следующая функция:
<button id = "button">button</button>
<script>
function changeColor(button) {
var thisButton = document.getElementById(button)
if (thisButton.style.background == '#0f0') {
thisButton.style.background='#0f0';
} else {
thisButton.style.background='#f00';
}
}
</script>
Если я использую в качестве цветов «красный» или «зеленый», это работает, но если я использую шестнадцатеричный код, как указано выше, или rgb (255,0,0), if всегда возвращает false. Есть идеи, что я делаю не так?
Вы используете неправильные шестнадцатеричные коды.
Красный - #FF0000
, зеленый - #008000
.
Вы сравниваете цвет фона с короткой версией шестнадцатеричного кода. Сравните это с полным шестизначным шестнадцатеричным кодом:
if (thisButton.style.background.toLowerCase() == '#00ff00')
Но подумайте об использовании для этого некоторых классов. Смена классов - намного лучший способ.
Согласен, лучше бы два класса btn-pending
и btn-completed
. это также сделает код чище, если вы хотите изменить не только цвет кнопки. Тогда все, что вам нужно сделать, это переключить классы.
У меня работает, может попробовать использовать document.querySelector
вместо document.getElementById
.
Похоже, браузер "автокорректирует" примененный цвет. В моих тестах, если я устанавливаю thisButton.style.background = 'rgb(255,0,0)'
, а затем считываю значение обратно с помощью console.info(thisButton.style.background)
, он добавлял бы пробел после каждой запятой, давая мне rgb(255, 0, 0)
. См. эта рабочий пример для демонстрации.
Предлагаю добавить атрибут data-color
, который будет полностью под вашим контролем.
function changeColor(button) {
var thisButton = document.getElementById(button)
if (thisButton.getAttribute('data-color') === 'red') {
thisButton.style.background='#0f0';
thisButton.setAttribute('data-color', 'green');
} else {
thisButton.style.background='#f00';
thisButton.setAttribute('data-color', 'red');
}
}
Свойство стиля цвета фона сильно зависит от браузера. Chrome может выводить что-то вроде rgb(0, 255, 0)
, а Internet Explorer может выводить #00FF00
.
Попробуйте удержать состояние кнопки в собственной модели.
const myButtonModel = {
color: "#0F0"
};
function changeColor() {
const buttonElement = document.getElementById("button");
myButtonModel.color = myButtonModel.color === "#0F0" ? "#F00" : "#0F0";
buttonElement.style.background = myButtonModel.color;
}
Если вы хотите иметь класс вместо (btn-toggled), вы можете сделать это следующим образом:
const buttonElement = document.getElementById("button");
buttonElement.classList.toggle("btn-toggled")
Возможный дубликат Как сравнить backgroundColor в Javascript?