Kwalifikacje w Zawodzie - Testy zawodowe online | Egzaminy Zawodowe

KWALIFIKACJA INF3 - CZERWIEC 2022



PYTANIE NR 37.
Aby za pomocą skryptu JavaScript zmienić wartość cechy elementu opisanego językiem CSS, należy posłużyć się szablonem zapisu
A.
B.
C.
D.
Wyjaśnienie poprawnej odpowiedzi:
Poprawny wzorzec wykorzystuje właściwość style elementu DOM: document.getElementById(id).style.<nazwa właściwości> = <nowa wartość>;.
Opcje bez style nie modyfikują stylu CSS, a innerHTML służy do zmiany zawartości HTML, nie cech CSS.

Pełne wyjaśnienie:

W JavaScripcie właściwości CSS elementu (te, które mają wpływ na jego wygląd) są dostępne przez obiekt style, który reprezentuje styl inline elementu (typowo jako CSSStyleDeclaration). Dlatego poprawny schemat ma postać: document.getElementById(id).style.<nazwa właściwości> = <nowa wartość>;. Najpierw pobierasz element z DOM, a następnie wskazujesz, że zmieniasz jego styl.

Dlaczego pozostałe odpowiedzi są błędne?

  • document.getElementById(id).<nazwa-atrybutu> = <nowa wartość>; – atrybuty HTML i właściwości obiektu DOM to inny poziom niż styl CSS. Bezpośrednie przypisanie do "atrybutu" nie jest ogólnym wzorcem zmiany cech CSS (czasem modyfikuje się np. konkretne pola DOM, ale to nie jest mechanizm stylowania).
  • document.getElementById(id).<nazwa właściwości> = <nowa wartość>; – brak pośrednictwa przez style sprawia, że wskazujesz pole obiektu elementu, a nie właściwość stylu. To nie jest poprawny, uniwersalny zapis zmiany CSS.
  • document.getElementById(id).innerHTML = <nowa wartość>; – innerHTML służy do podmiany zawartości (HTML) wewnątrz elementu. Może zmienić to, co widać, ale poprzez zmianę treści/struktury, a nie poprzez ustawienie właściwości CSS elementu.

W praktyce spotkasz też rozwiązania alternatywne: często zamiast bezpośrednio ustawiać wiele właściwości stylu, wygodniej jest przełączać klasy CSS (np. przez classList) albo używać metod ustawiających właściwości w sposób bardziej ogólny. Na egzaminie kluczowe jest jednak rozpoznanie, że modyfikacja stylu odbywa się przez .style.

Dodatkowe pytania

Dodatkowe pytania (FAQ):
Jak zmienić styl CSS elementu w JavaScripcie po id?
Najczęściej pobierasz element przez document.getElementById(...), a potem ustawiasz właściwość w element.style, np. element.style.color = "red". To zmienia styl inline, czyli bezpośrednio na elemencie, niezależnie od arkusza CSS.
Co oznacza zapis element.style w JavaScripcie?
element.style to obiekt reprezentujący styl inline danego elementu (zestaw właściwości CSS możliwych do ustawienia z JS). Dzięki niemu możesz zmieniać wygląd bez edycji plików CSS, ale zwykle dotyczy to tylko konkretnego elementu.
Dlaczego nie używa się innerHTML do zmiany właściwości CSS?
innerHTML zmienia treść (kod HTML) wewnątrz elementu, a nie jego właściwości wyglądu. Możesz przez to "pośrednio" wpłynąć na stronę, ale to inny mechanizm i często prowadzi do błędów (np. utraty nasłuchiwaczy zdarzeń, ryzyka wstrzyknięcia HTML).
Jakie są najczęstsze błędy przy ustawianiu stylu przez JavaScript?
Typowe pomyłki to pomijanie .style, mylenie atrybutów z właściwościami DOM oraz wpisywanie niepoprawnej nazwy właściwości. Często też myli się zmianę stylu z podmianą treści przez innerHTML, co nie rozwiązuje problemu stylowania.
Czy document.getElementById(id) wymaga cudzysłowu w id?
W praktycznym kodzie zwykle przekazujesz łańcuch znaków z identyfikatorem, np. document.getElementById("box"). W zadaniach egzaminacyjnych często używa się skrótu id jako nazwy zmiennej, która już przechowuje właściwą wartość.
Jakie właściwości CSS można zmieniać przez element.style?
Możesz zmieniać wiele właściwości, np. kolor, rozmiar, marginesy czy widoczność, o ile odpowiadają im pola w obiekcie style. Kluczowe jest, że modyfikujesz styl inline elementu, więc efekt widać od razu w przeglądarce.
Jak działa zmiana właściwości CSS po zdarzeniu kliknięcia?
Dodajesz obsługę zdarzenia (np. kliknięcia), a w funkcji ustawiasz element.style.... Przykładowo po kliknięciu możesz ustawić inną wartość właściwości i w ten sposób uzyskać efekt interakcji UI bez przeładowania strony.
Jaka jest różnica między zmianą stylu a dodaniem klasy CSS?
Zmiana przez element.style ustawia styl inline dla pojedynczego elementu. Dodanie klasy (np. przez classList) wykorzystuje reguły z arkusza CSS i zwykle jest łatwiejsze do utrzymania w większych projektach, bo logika i wygląd są lepiej rozdzielone.
Kiedy lepiej nie ustawiać stylów bezpośrednio w JavaScripcie?
Gdy zmian jest dużo albo dotyczą wielu elementów, lepiej przełączać klasy CSS lub korzystać z gotowych reguł w arkuszu. Bezpośrednia modyfikacja wielu właściwości przez style może utrudnić utrzymanie projektu i mieszać logikę z warstwą prezentacji.
Jak przygotować się do zadań egzaminacyjnych z DOM i CSS w JS?
Ćwicz na krótkich przykładach: pobieranie elementów (getElementById, querySelector), obsługę zdarzeń oraz dwie metody zmiany wyglądu: element.style i przełączanie klas. Rozwiązuj zadania, w których trzeba odróżnić stylowanie od zmiany treści (innerHTML).
info

Około 60% zdających odpowiada poprawnie na to pytanie. średnie

Źródła:

  • MDN Web Docs: Document.getElementById() – https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById (dostęp: 2026-03-02)
  • MDN Web Docs: HTMLElement.style – https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style (dostęp: 2026-03-02)
  • MDN Web Docs: Element.innerHTML – https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML (dostęp: 2026-03-02)

Materiały:

  • Dokumentacja MDN: DOM i wyszukiwanie elementów (getElementById, querySelector)
  • Dokumentacja MDN: CSSStyleDeclaration i właściwość style
  • Ćwiczenia: obsługa zdarzeń i modyfikacja klas CSS (classList)
Zobacz też:

Aktualizacja pytania: 31.03.2026



Aktualizacja pytania: 31.03.2026
📡 Brak połączenia internetowego