← Wróć do spisu ← Wróć na pulpit
Materiał edukacyjny · Informatyka JavaScript w przeglądarce · Moduł 10

MODUŁ 10

Style CSS, klasy, zakładki i filtry

PPrezentacja dla nauczyciela

Nowoczesne strony internetowe dynamicznie reagują na działania użytkownika poprzez zmianę wyglądu, ukrywanie zbędnych sekcji i przełączanie paneli informacyjnych. W tym module dowiesz się, jak kontrolować style CSS za pomocą JavaScript, tworzyć interaktywne zakładki oraz stosować filtry graficzne.

Modyfikacja stylów inline i właściwości style

Każdy element drzewa DOM posiada właściwość style, która reprezentuje reguły CSS przypisane bezpośrednio w atrybucie inline znacznika. Wszystkie nazwy właściwości CSS zawierające myślnik zapisujemy w JavaScript w notacji wielbłądziej (camelCase), na przykład background-color staje się backgroundColor, a font-size zamienia się na fontSize.

Do dynamicznego ukrywania i pokazywania bloków na stronie najczęściej wykorzystuje się właściwość display. Wartość 'none' całkowicie usuwa element z widoku i zwalnia zajmowane przez niego miejsce w układzie strony. Aby przywrócić jego widoczność, przypisujemy odpowiedni typ wyświetlania, np. 'block' lub pusty łańcuch '' (co przywraca wartość zdefiniowaną w zewnętrznym arkuszu CSS).

Warto odróżniać display: none od visibility: hidden. Właściwość visibility ukrywa element jedynie wizualnie, pozostawiając puste pole o jego wymiarach w strukturze dokumentu. 

function przelaczSzczegoly() {
  const panel = document.getElementById('panelInformacji');
  const przycisk = document.getElementById('przyciskPokaz');

  if (panel.style.display === 'block') {
    panel.style.display = 'none';
    przycisk.textContent = 'Pokaż szczegóły techniczne';
  } else {
    panel.style.display = 'block';
    przycisk.textContent = 'Ukryj szczegóły techniczne';
  }
}
1. W jaki sposób całkowicie ukryć element blokowy w drzewie dokumentu za pomocą właściwości style?
2. Dlaczego dwuczłonowe właściwości CSS, takie jak background-color, zapisuje się w obiekcie style jako backgroundColor?
3. Jaka jest różnica pomiędzy właściwościami display: none oraz visibility: hidden?

Zarządzanie klasami CSS za pomocą classList

Chociaż zmiana pojedynczych stylów inline przez element.style jest szybka, w bardziej złożonych komponentach (takich jak systemy zakładek czy przełączniki motywów) znacznie czytelniejszym i bezpieczniejszym podejściem jest manipulowanie klasami CSS za pomocą obiektu classList.

Obiekt classList udostępnia przejrzyste metody:

  • element.classList.add('klasa') — dodaje klasę do znacznika,
  • element.classList.remove('klasa') — usuwa wskazaną klasę,
  • element.classList.toggle('klasa') — przełącza obecność klasy (dodaje, gdy jej nie ma, lub usuwa, gdy już istnieje),
  • element.classList.contains('klasa') — sprawdza, czy element posiada wskazaną klasę (zwraca true lub false).

Dzięki temu cała definicja wyglądu (np. ukrywanie panelu, zmiana koloru aktywnej zakładki) pozostaje w arkuszu stylów CSS, a skrypt JavaScript odpowiada jedynie za aktywację właściwej klasy w odpowiedzi na kliknięcie użytkownika. 

function otworzZakladke(nr) {
  const panele = document.querySelectorAll('.panel');
  const przyciski = document.querySelectorAll('.tab-btn');

  panele.forEach(function(p) {
    p.classList.remove('aktywny');
  });

  przyciski.forEach(function(b) {
    b.classList.remove('aktywny');
  });

  document.getElementById('panel' + nr).classList.add('aktywny');
  przyciski[nr].classList.add('aktywny');
}
4. Która metoda obiektu classList dodaje nową klasę do elementu, o ile wcześniej jej nie posiadał?
5. Do czego służy metoda element.classList.toggle('widoczny')?
6. Dlaczego do przełączania stylów komponentów (np. zakładek) zaleca się manipulację klasami CSS zamiast modyfikowania wielu właściwości style naraz?

Filtry graficzne CSS i dynamiczne multimedia

Dynamiczna prezentacja multimediów w przeglądarce obejmuje zarówno podmianę wyświetlanych grafik, jak i nakładanie efektów wizualnych bez konieczności edytowania plików na dysku.

Ścieżkę do wyświetlanego pliku graficznego w znaczniku <img> zmieniamy poprzez przypisanie nowego adresu do właściwości src obiektu DOM, na przykład: obraz.src = 'obrazek2.jpg'.

Do nakładania efektów graficznych służy właściwość CSS filter, sterowana w JavaScript za pomocą element.style.filter. Najpopularniejsze funkcje filtrów to:

  • grayscale(100%) — konwersja obrazu do skali szarości (efekt czarno-biały),
  • sepia(100%) — nadanie grafice ciepłego, postarzanego odcienia sepii,
  • blur(4px) — rozmycie optyczne o zadanym promieniu w pikselach,
  • invert(100%) — negatyw (odwrócenie wszystkich kolorów),
  • none — usunięcie wszelkich filtrów i przywrócenie naturalnego wyglądu.
function zastosujEfekt() {
  const wybrany = document.querySelector('input[name="filtr"]:checked');
  const baner = document.getElementById('baner');

  baner.style.filter = wybrany.value;
}
7. W jaki sposób za pomocą JavaScript nałożyć na element filtr czarno-biały (skala szarości)?
8. Jak w skrypcie JavaScript zmienić wyświetlany plik graficzny w znaczniku img o identyfikatorze okladka?
9. Jaka wartość właściwości CSS filter pozwala przywrócić pierwotny wygląd grafiki bez żadnych efektów?

Ćwiczenia

Materiały edukacyjne Hyżyk · JavaScript pod kątem INF.03 · Moduł 10