Zmiana stylów, klas i atrybutów

<p id="tekst">Ten akapit zmienia wygląd.</p>
<label>Rozmiar [%]: <input type="number" id="rozmiar" value="100" min="50" max="300"></label>
<select id="krój">
  <option value="normal">prosty</option>
  <option value="italic">kursywa</option>
</select>
<button type="button" onclick="formatuj('red')">czerwony</button>
<button type="button" onclick="formatuj('green')">zielony</button>
<button type="button" onclick="formatuj('blue')">niebieski</button>

// jedna funkcja z parametrem zamiast trzech kopii – jak w arkuszu E.14 ze stycznia 2019
function formatuj(kolor) {
  const akapit = document.getElementById('tekst');
  const rozmiar = document.getElementById('rozmiar').value;        // napis, np. "150"
  akapit.style.fontSize = rozmiar + '%';                           // jednostka doklejona do napisu
  akapit.style.fontStyle = document.getElementById('krój').value;  // "normal" / "italic"
  akapit.style.color = kolor;
}

<blockquote id="cytat1" onclick="pokazNastepny(1)">1. Kliknij, aby zobaczyć następny cytat.</blockquote>
<blockquote id="cytat2" onclick="pokazNastepny(2)">2. Programowanie to sztuka mówienia komputerowi, czego chcesz.</blockquote>
<blockquote id="cytat3" onclick="pokazNastepny(3)">3. Najpierw spraw, by działało. Potem – by działało dobrze.</blockquote>

blockquote { background: #fff8d6; padding: 12px; border-left: 4px solid #15171c; cursor: pointer; }
#cytat2, #cytat3 { display: none; }   /* wstępnie ukryte w CSS */

function pokazNastepny(numer) {
  const nastepny = numer === 3 ? 1 : numer + 1;       // zawijanie 3 → 1
  document.getElementById('cytat' + numer).style.display = 'none';
  document.getElementById('cytat' + nastepny).style.display = 'block';
}

<nav>
  <button type="button" id="btn-kolor" onclick="pokazSekcje('kolor')">Kolor</button>
  <button type="button" id="btn-ksztalt" onclick="pokazSekcje('ksztalt')">Kształt</button>
  <button type="button" id="btn-wzor" onclick="pokazSekcje('wzor')">Wzór</button>
</nav>
<section id="kolor" class="zakladka">Sekcja KOLOR – wybierz lakier.</section>
<section id="ksztalt" class="zakladka">Sekcja KSZTAŁT – migdał, kwadrat, owal.</section>
<section id="wzor" class="zakladka">Sekcja WZÓR – french, ombre, brokat.</section>

nav button { background: Crimson; color: white; border: 0; padding: 8px 16px; cursor: pointer; }
.zakladka { display: none; padding: 16px; border: 1px solid #ccc; margin-top: 8px; }
#kolor { display: block; }   /* start: pierwsza sekcja widoczna */

function pokazSekcje(nazwa) {
  // 1. ukryj wszystkie sekcje i „zgaś” wszystkie przyciski
  const sekcje = document.querySelectorAll('.zakladka');
  for (const sekcja of sekcje) {
    sekcja.style.display = 'none';
  }
  const przyciski = document.querySelectorAll('nav button');
  for (const przycisk of przyciski) {
    przycisk.style.backgroundColor = 'Crimson';
  }
  // 2. pokaż wybraną sekcję i podświetl jej przycisk
  document.getElementById(nazwa).style.display = 'block';
  document.getElementById('btn-' + nazwa).style.backgroundColor = 'Salmon';
}
pokazSekcje('kolor');   // stan początkowy: także przycisk ma właściwy kolor

<label><input type="checkbox" id="ramka"> Rysuj ramkę</label>
<button type="button" id="tryb">Tryb nocny</button>
<p id="stan"></p>
<div id="obraz">obraz</div>

body.nocny { background: #15171c; color: #eee; }
#obraz { width: 120px; height: 80px; background: #f2d338; display: grid; place-items: center; margin-top: 8px; }
#obraz.ramka { border: 4px solid Navy; }

const obraz = document.getElementById('obraz');
const poleRamki = document.getElementById('ramka');

poleRamki.addEventListener('change', () => {
  obraz.classList.toggle('ramka', poleRamki.checked);   // zaznaczony → dodaj, odznaczony → usuń
});

document.getElementById('tryb').addEventListener('click', () => {
  const jestNocny = document.body.classList.toggle('nocny');   // true, gdy klasa dodana
  document.getElementById('stan').textContent = jestNocny ? 'Tryb nocny włączony' : 'Tryb dzienny';
});

<img id="duzy" alt="duży obraz 1" width="240" height="140">
<p id="opis">Wyświetlany: obraz 1</p>
<img class="miniatura" data-numer="1" alt="miniatura 1" width="60" height="35">
<img class="miniatura" data-numer="2" alt="miniatura 2" width="60" height="35">
<img class="miniatura" data-numer="3" alt="miniatura 3" width="60" height="35">

.miniatura { cursor: pointer; border: 2px solid transparent; }
.miniatura.aktywna { border-color: Crimson; }

// Na egzaminie masz pliki 1.jpg, 2.jpg… i piszesz: duzy.src = numer + 'd.jpg'
// Tu, bez plików, rysujemy obrazek w locie – ta funkcja to tylko zastępnik plików:
function zrodloObrazka(numer, szerokosc, wysokosc) {
  const kolory = ['', 'SteelBlue', 'Olive', 'Indigo'];
  const svg = '<svg xmlns="http://www.w3.org/2000/svg" width="' + szerokosc + '" height="' + wysokosc + '">' +
    '<rect width="100%" height="100%" fill="' + kolory[numer] + '"/>' +
    '<text x="50%" y="55%" font-size="' + (wysokosc / 2) + '" fill="white" text-anchor="middle" dominant-baseline="middle" font-family="sans-serif">' + numer + '</text></svg>';
  return 'data:image/svg+xml;utf8,' + encodeURIComponent(svg);
}

const duzy = document.getElementById('duzy');
const miniatury = document.querySelectorAll('.miniatura');

// start: miniatury dostają obrazki, duży pokazuje obraz 1
for (const miniatura of miniatury) {
  const numer = miniatura.dataset.numer;                       // "1", "2", "3" – z atrybutu data-numer
  miniatura.src = zrodloObrazka(numer, 60, 35);                // na egzaminie: numer + 'm.jpg'
  miniatura.addEventListener('click', () => pokazDuzy(numer));
}
pokazDuzy(1);

function pokazDuzy(numer) {
  duzy.src = zrodloObrazka(numer, 240, 140);                   // na egzaminie: numer + 'd.jpg'
  duzy.alt = 'duży obraz ' + numer;
  document.getElementById('opis').textContent = 'Wyświetlany: obraz ' + numer;
  for (const m of miniatury) {
    m.classList.toggle('aktywna', m.dataset.numer == numer);   // == bo "1" vs 1
  }
}

<img id="zdjecie" alt="kolorowy gradient" width="240" height="120">
<p>
  <label><input type="radio" name="filtr" value="none" checked> Brak</label>
  <label><input type="radio" name="filtr" value="blur(4px)"> Rozmycie</label>
  <label><input type="radio" name="filtr" value="sepia(100%)"> Sepia</label>
  <label><input type="radio" name="filtr" value="invert(100%)"> Negatyw</label>
  <button type="button" onclick="zastosujFiltr()">Zastosuj</button>
</p>
<label>Jasność: <input type="range" id="jasnosc" min="0" max="250" value="100"> <span id="jasnoscTekst">100</span>%</label>

const zdjecie = document.getElementById('zdjecie');
// zastępnik pliku zdjecie.jpg – kolorowy gradient rysowany w locie
zdjecie.src = 'data:image/svg+xml;utf8,' + encodeURIComponent(
  '<svg xmlns="http://www.w3.org/2000/svg" width="240" height="120"><defs><linearGradient id="g">' +
  '<stop offset="0" stop-color="#e63946"/><stop offset="0.5" stop-color="#f2d338"/><stop offset="1" stop-color="#2a9d8f"/>' +
  '</linearGradient></defs><rect width="100%" height="100%" fill="url(#g)"/></svg>');

function zastosujFiltr() {
  const wybrany = document.querySelector('input[name="filtr"]:checked').value;   // np. "sepia(100%)"
  const jasnosc = document.getElementById('jasnosc').value;                       // np. "130"
  // dwa filtry w jednym napisie, oddzielone spacją
  zdjecie.style.filter = wybrany + ' brightness(' + jasnosc + '%)';
}

document.getElementById('jasnosc').addEventListener('input', () => {
  document.getElementById('jasnoscTekst').textContent = document.getElementById('jasnosc').value;
  zastosujFiltr();   // suwak działa na żywo, bez przycisku
});

<p class="wazne">Pierwszy ważny akapit.</p>
<p>Zwykły akapit.</p>
<p class="wazne">Drugi ważny akapit.</p>
<button type="button" onclick="pogrub()">Pogrub ważne</button>

function pogrub() {
  var elementy = document.getElementsByClassName('wazne');   // kolekcja – nie ma .style!
  for (var i = 0; i < elementy.length; i++) {
    elementy[i].style.fontWeight = 'bolder';                 // każdy element osobno
    elementy[i].style.color = 'Crimson';
  }
}