Как правильно написать условие для проверки стиля в кнопке?
Всем доброго дня, пытаюс написать такое условие для кнопки...
if( $(this).style.backgroundColor == 'white'){ что то делаю...}
Но выдает ошибку... не могу разобраться как правильно... |
А так?
this.style.backgroundColor |
Ошибку не выдает, ну условие не выполняется... посмотрите на полный код... может я что-то не то написал..
if( this.style.backgroundColor == 'white'){ $(this).toggleClass("btn"); } else { $(this).toggleClass("btn2"); }
|
Zhenyaxxxx,
никогда не проверяйте значение установленного цвета. сделайте css правило и тогда if($(this).hasClass( "..." )) или if(this.classList.contains("...") ) |
Цитата:
this.style.backgroundColor И лучше прислушайся к совету от рони. Поскольку значение цветов браузеры "показывают на свое усмотрение"... |
У меня сейчас мозг лопнет... ничего не получается, напишу весь код..
<button class='button_like' style='float:right; background:white; color:#4682B4;'>Кнопка</button> <button class='button_like' style='float:right; background:white; color:#4682B4;'>Кнопка</button> <button class='button_like' style='float:right; background:#4682B4; color:white;'>Кнопка</button> <button class='button_like' style='float:right; background:#4682B4; color:white;'>Кнопка</button> У одних бэкграунд синий, колор белый... У других бэкраунд белый, колор синий... Как сделать, чтоб при клике менялся бекграунд с колором, с синего на белый и наоборот...? |
Цитата:
Ориентируйся на имена классов. |
Цитата:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="https://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<!--
-->
<style>
:root {
--my-color1: white;
--my-color2: #4682B4;
}
.test {
background: var(--my-color1);
color: var(--my-color2);
}
.test.on {
background: var(--my-color2);
color: var(--my-color1);
}
</style>
<script>
$(_ => {
$('button').click(function() {
$(this).toggleClass('on')
})
})
/*
document.addEventListener('DOMContentLoaded', _ => {
})
*/
</script>
</head>
<body>
<button class='test'>Test</button>
</body>
</html>
|
Работет, спасибо)))
|
| Часовой пояс GMT +3, время: 12:32. |