🧪 Об'єкт style та його властивості

При натисканні кнопки змінюємо колір букви (стиль) і сам текст кнопки.

// Отримуємо елементи
const btn = document.getElementById('demo1Btn');
const letter = document.getElementById('letterA');

btn.addEventListener('click', function() {
    // змінюємо колір через style
    letter.style.color = '#c44536';
    letter.style.fontSize = '3.5rem';
    this.textContent = 'Колір змінено!';
});

Натисни — збільшиться до 400px, з'явиться товста золота рамка. Повторно — повернеться.

Портрет у рамці

const img = document.getElementById('portraitImg');
const btn2 = document.getElementById('frameBtn');

btn2.addEventListener('click', function() {
    // перемикаємо клас — API classList.toggle
    img.classList.toggle('large-frame');
    this.textContent = img.classList.contains('large-frame')
        ? 'Початковий розмір'
        : 'Портрет у рамці';
});

CSS-клас .large-frame змінює розміри та рамку. Рамка тепер працює.

Кнопка ховає/показує кота через style.display.

const catBlock = document.getElementById('catBlock');
const catBtn = document.getElementById('catBtn');

catBtn.addEventListener('click', function() {
    if (catBlock.style.display === 'none') {
        catBlock.style.display = 'flex';
        this.textContent = 'Сховати';
    } else {
        catBlock.style.display = 'none';
        this.textContent = 'Показати';
    }
});

Кнопки додають або видаляють клас у квадрата.

block.classList.add('red-bg');
block.classList.remove('red-bg');
block.classList.toggle('blue-bg');

hideBtn.onclick = () => 
    paragraph.style.display = 'none';
showBtn.onclick = () => 
    paragraph.style.display = 'block';

Мій текст можна змінити

text.style.fontSize = '2rem';
text.style.color = '#1e56c0';
text.style.backgroundColor = '#ffecb3';

Натискай — клас "foo" додається/видаляється.

div.classList.toggle('foo');