Kwalifikacje w Zawodzie - Testy zawodowe online | Egzaminy Zawodowe

KWALIFIKACJA INF3 - TEST WIEDZY NR 4



PYTANIE NR 36.
Rozważ następujący fragment kodu JavaScript: 
let element = document.getElementById('myElement');
element.style.color = 'red';
Co zostanie wykonane przez powyższy kod?
A.
B.
C.
D.
Wyjaśnienie poprawnej odpowiedzi:
Kod wyszukuje element o identyfikatorze "myElement" metodą getElementById, a następnie ustawia jego styl inline: element.style.color = 'red'.
W CSS właściwość color dotyczy koloru tekstu, więc tekst tego elementu (i typowo dziedziczące potomki) będzie czerwony, a nie tło czy obramowanie.

Pełne wyjaśnienie:

Fragment JavaScript działa w dwóch krokach:

  1. Pobiera referencję do elementu DOM o identyfikatorze myElement za pomocą document.getElementById('myElement').
  2. Ustawia właściwość stylu inline: element.style.color = 'red'.

W CSS właściwość color oznacza kolor tekstu (foreground). Dlatego poprawna jest odpowiedź: "Zmieni kolor tekstu elementu o id 'myElement' na czerwony." Jest to bezpośrednia konsekwencja przypisania do style.color.

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

  • "Zmieni kolor tła…" – kolor tła ustawia się właściwością background-color (w JS: style.backgroundColor), a nie style.color.
  • "Zmieni kolor ramki…" – obramowanie kontrolują właściwości typu border-color (w JS: style.borderColor) oraz powiązane parametry obramowania.
  • "Zmieni kolor linków w elemencie…" – ustawienie color na elemencie wpływa na jego tekst; linki mogą dziedziczyć kolor, ale często mają własne style (np. selektory a lub pseudoklasy), więc stwierdzenie o "kolorze linków" jest zbyt wąskie i nie wynika jednoznacznie z kodu.

Wskazówka egzaminacyjna: w pytaniach o modyfikację stylu rozróżniaj nazwy właściwości CSS. color to tekst, background-color to tło, a border-color to obramowanie.

Dodatkowe pytania

Dodatkowe pytania (FAQ):
Co robi document.getElementById('myElement') w JavaScript?
Zwraca referencję do pierwszego elementu DOM o atrybucie id równym myElement. Jeśli taki element nie istnieje, zwraca null, co oznacza, że dalsze odwołania (np. do style) mogą spowodować błąd.
Co oznacza element.style.color = 'red'?
Ustawia styl inline elementu: właściwość CSS color (kolor tekstu) na wartość red. To zmienia kolor wyświetlanego tekstu w tym elemencie zgodnie z kaskadowaniem i dziedziczeniem CSS.
Jaka jest różnica między color a background-color?
color dotyczy koloru tekstu (pierwszego planu), a background-color dotyczy koloru tła elementu. W JavaScript odpowiadają im zwykle style.color oraz style.backgroundColor.
Czy ten kod zmieni kolor tła elementu na czerwony?
Nie. Zmienia kolor tekstu, ponieważ używa właściwości style.color. Dla tła trzeba ustawić style.backgroundColor (np. na 'red' lub wartość w formacie RGB/HEX).
Dlaczego element.style zmienia styl "na stałe" w HTML?
element.style zapisuje wartości jako style inline na elemencie (atrybut style). To ma zwykle wyższy priorytet niż reguły z plików CSS (choć nadal może zostać nadpisane np. przez !important).
Kiedy getElementById zwróci null i co wtedy zrobić?
Zwróci null, gdy w DOM nie ma elementu o takim id (np. literówka lub kod uruchamia się zanim element powstanie). Rozwiązanie: sprawdź wynik (if (element)) lub uruchom kod po załadowaniu DOM, np. po zdarzeniu DOMContentLoaded.
Czy ustawienie color wpływa też na elementy potomne?
Często tak, ponieważ color jest właściwością dziedziczoną. Potomkowie mogą jednak mieć własne style (np. ustawione w CSS dla konkretnego selektora), które nadpiszą dziedziczenie. Dlatego nie zawsze każdy element wewnątrz będzie czerwony.
Jak zmienić kolor obramowania elementu w JavaScript?
Należy użyć właściwości obramowania, np. element.style.borderColor. Pamiętaj też, że aby obramowanie było widoczne, zwykle trzeba mieć ustawione border-style i border-width (np. solid i 1px).
Jak zmienić kolor tekstu wielu elementów bez id?
Zamiast id użyj selektorów, np. document.querySelectorAll('.klasa'), a potem iteruj po NodeList i ustawiaj style.color. To typowe w zadaniach, gdzie styl ma dotyczyć grupy elementów (np. wszystkich elementów listy).
Jakie błędy są najczęstsze w zadaniach o style.color na egzaminie?
Najczęściej myli się color z backgroundColor oraz zapomina o camelCase w JS (np. pisze background-color). Częsty jest też błąd logiczny: brak sprawdzenia, czy getElementById faktycznie znalazło element.
info

Statystycznie 70% uczniów zna prawidłową odpowiedź. średnio łatwe

Źródła:

  • MDN Web Docs: Document.getElementById() - https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById (dostęp: 2026-02-27)
  • MDN Web Docs: HTMLElement.style - https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style (dostęp: 2026-02-27)
  • MDN Web Docs: CSS color property - https://developer.mozilla.org/en-US/docs/Web/CSS/color (dostęp: 2026-02-27)

Materiały:

  • Dokumentacja MDN: DOM i wyszukiwanie elementów (getElementById)
  • Dokumentacja MDN: HTMLElement.style i manipulacja CSS z JavaScript
  • Powtórka właściwości CSS: różnica między color, background-color i border-color
Zobacz też:

Aktualizacja pytania: 31.03.2026



Aktualizacja pytania: 31.03.2026
📡 Brak połączenia internetowego