/* $color-blue_1: #1e88e5 */
/* $color-blue_2: #7ab9f0 */
/* $color-blue_1: #1e88e5
$color-blue_2: #7ab9f0 */
/*
$color-blue_1: #1e88e5
$color-blue_2: #7ab9f0
*/<div class="container">
<div class="row">
<div class="col-4 d-flex flex-column">
<div class="flex-grow-1">
Test
suifyuwiygfuisygusdifyg
weiurwoeurwoeur
ewoiruwoeurioweruowei
weioruweoruoweiru
<div> Down </div>
</div>
</div>
<div class="col-4 d-flex flex-column">
<div class="flex-grow-1">
Test
</div>
<div> Down </div>
</div>
<div class="col-4 d-flex flex-column">
<div class="flex-grow-1">
Test
</div>
<div>Down</div>
</div>
</div>
</div><input type="text" value="" class="some-input">body, html {
background-color: black;
color: white;
}
.some-input {
border: none;
border-bottom: 1px solid white;
background-color: transparent;
color: inherit;
outline: none;
}<div class="class1 class2">some elem</div>
<button class="btn">toggle</button>window.onload = e => {
// получаем элементы
const $div = document.querySelector('.class1')
const $btn = document.querySelector('.btn')
// функция, переключающая класс ( нужна для демонстрации )
const toggle = e => $div.classList.toggle('class2')
// функция, которая будет выполняться при изменении атрибутов у $div
const obsCallback = ( ml, ob ) => {
// за место вывода в консоль после проверки на существование класса подставляем нужные функции
ml[0].target.classList.contains('class2') ? console.log(true) : console.log(false)
}
// создание обсервера и передача нашей функции
const observer = new MutationObserver(obsCallback)
// опции (за чем будем следить)
const observerOptions = {
childList: false,
attributes: true,
subtree: false
}
// начинаем наблюдать
observer.observe($div, observerOptions)
// просто повесил событие на кнопку чтобы менять класс у $div
$btn.addEventListener('click', toggle)
}