JavaScript w przeglądarce · Moduł 10

Style CSS, klasy, zakładki i filtry

Manipulacja stylami inline, właściwość display, zarządzanie klasami przez classList, mechanizm zakładek i efekty graficzne CSS filter.

45 min
16 slajdów
Notatki nauczyciela: N
Strona modułu: otwórz

Plan · 45 min

Co dziś robimy

12 minModyfikacja stylów inline i właściwości style Do dynamicznego ukrywania i pokazywania bloków na stronie najczęściej wykorzystuje się…
12 minZarządzanie klasami CSS za pomocą classList element.classList.add('klasa') — dodaje klasę do znacznika,
12 minFiltry graficzne CSS i dynamiczne multimedia grayscale(100%) — konwersja obrazu do skali szarości (efekt czarno-biały),
4 minĆwiczenia 16 zadań w module — wybierz 3–4 na lekcję
5 minPodsumowanie bilet wyjściowy i zadanie domowe

Atom 1 z 3 · ~12 min

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…

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.
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.

Kod · atom 1 · ~3 min

Jak to wygląda w kodzie

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';
  }
}

Przykład na żywo · atom 1 · ~3 min

Uruchom i pokaż

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';
  }
}

Sprawdzenie · atom 1 · ~2 min

Pytanie do klasy

W jaki sposób całkowicie ukryć element blokowy w drzewie dokumentu za pomocą właściwości style?

Atom 2 z 3 · ~12 min

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…

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 ).

Kod · atom 2 · ~3 min

Jak to wygląda w kodzie

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');
}

Przykład na żywo · atom 2 · ~3 min

Uruchom i pokaż

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');
}

Sprawdzenie · atom 2 · ~2 min

Pytanie do klasy

Która metoda obiektu classList dodaje nową klasę do elementu, o ile wcześniej jej nie posiadał?

Atom 3 z 3 · ~12 min

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.

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),

Kod · atom 3 · ~3 min

Jak to wygląda w kodzie

function zastosujEfekt() {
  const wybrany = document.querySelector('input[name="filtr"]:checked');
  const baner = document.getElementById('baner');

  baner.style.filter = wybrany.value;
}

Przykład na żywo · atom 3 · ~3 min

Uruchom i pokaż

function zastosujEfekt() {
  const wybrany = document.querySelector('input[name="filtr"]:checked');
  const baner = document.getElementById('baner');

  baner.style.filter = wybrany.value;
}

Sprawdzenie · atom 3 · ~2 min

Pytanie do klasy

W jaki sposób za pomocą JavaScript nałożyć na element filtr czarno-biały (skala szarości)?

Praca własna · ~4 min

Ćwiczenia w module (16)

Zamknięcie · ~3 min

Co zabrać z lekcji

Do dynamicznego ukrywania i pokazywania bloków na stronie najczęściej wykorzystuje się właściwość display .
element.classList.add('klasa') — dodaje klasę do znacznika,
grayscale(100%) — konwersja obrazu do skali szarości (efekt czarno-biały),

Bilet wyjściowy: Jaka wartość właściwości CSS filter pozwala przywrócić pierwotny wygląd grafiki bez żadnych efektów?
Odpowiedź: d) Wartość 'none'