Kwalifikacje w Zawodzie - Testy zawodowe online | Egzaminy Zawodowe

KWALIFIKACJA INF3 - CZERWIEC 2021 (test 2)


PYTANIE NR 36.
<p id="jeden">Kwalifikacja EE.01</p> Która z instrukcji języka JavaScript dokona zmiany koloru tekstu na niebieski w akapicie zdefiniowanym w dokumencie HTML?
A.
B.
C.
D.
Wyjaśnienie poprawnej odpowiedzi:
Aby zmienić kolor tekstu akapitu o id "jeden", trzeba pobrać element z DOM i ustawić właściwość CSS przez obiekt style: style.color. Pozostałe propozycje są błędne, bo pomijają style lub próbują ustawiać kolor tła (background) albo używają niepoprawnej nazwy właściwości.

Pełne wyjaśnienie:

W JavaScript zmiana stylu elementu HTML odbywa się przez:

  • odszukanie elementu w drzewie DOM (np. po id),
  • modyfikację właściwości stylu przez obiekt style.

Poprawna instrukcja:

document.getElementById("jeden").style.color = "blue";

Dlaczego działa?

  • document.getElementById("jeden") zwraca element o atrybucie id równym "jeden" (tu: akapit <p>).
  • .style daje dostęp do stylów inline elementu (interfejs CSSStyleDeclaration).
  • .color odpowiada za kolor tekstu (w CSS to właściwość color).

Dlaczego pozostałe odpowiedzi są niepoprawne?

  • ...getElementById("jeden").color = "blue" – właściwość color nie jest standardowo ustawiana bezpośrednio na elemencie DOM; do stylu służy element.style.
  • ...getElementById("jeden").background-color = "blue" – to niepoprawny zapis w JS: myślnik nie może występować w nazwie właściwości w taki sposób (byłoby to interpretowane jak odejmowanie). Dodatkowo dotyczy tła, nie tekstu.
  • ...getElementById("jeden").style.background-color = "blue" – mimo użycia style, dalej błędna jest nazwa właściwości. W JS stosuje się camelCase: backgroundColor, a nie background-color. I nadal zmieniałoby to tło, nie kolor tekstu.

Wskazówka egzaminacyjna: jeśli pytanie dotyczy wyglądu, sprawdź, czy ustawiasz właściwą cechę (color vs background) oraz czy używasz poprawnej ścieżki element.style.nazwaWłaściwości z zapisem camelCase.

Dodatkowe pytania

Dodatkowe pytania (FAQ):
Jak zmienić kolor tekstu elementu HTML w JavaScript?
Najczęściej pobierasz element z DOM (np. getElementById) i ustawiasz styl: element.style.color. Przykład: document.getElementById("jeden").style.color = "blue";. To zmienia kolor tekstu, a nie tło.
Dlaczego w JavaScript trzeba użyć .style.color, a nie .color?
W DOM właściwości wyglądu są skupione w obiekcie style (CSSStyleDeclaration). Sama właściwość color nie jest standardowo ustawiana bezpośrednio na elemencie. Dlatego poprawny zapis to element.style.color.
Co robi document.getElementById("jeden")?
Ta funkcja wyszukuje w dokumencie HTML element, który ma atrybut id równy "jeden" i zwraca referencję do tego elementu DOM. Dzięki temu możesz później zmienić jego treść, atrybuty lub style (np. kolor tekstu).
Jaka jest różnica między color a backgroundColor w JavaScript?
style.color zmienia kolor znaków (tekstu) w elemencie. style.backgroundColor zmienia kolor tła elementu. To częsty błąd na egzaminie: wybór właściwości od tła, gdy pytanie dotyczy koloru tekstu.
Dlaczego nie działa zapis style.background-color w JavaScript?
W JavaScript nazwy właściwości stylu nie używają myślników jak w CSS. Stosuje się zapis camelCase, np. backgroundColor. Zapis z myślnikiem może zostać błędnie zinterpretowany przez silnik JS i nie ustawi żadnej właściwości.
Czy wartość "blue" musi być po angielsku w ustawieniu koloru?
Wartości kolorów w CSS/JS przyjmują standardowe formaty CSS, np. nazwy angielskie ("blue"), zapis szesnastkowy ("#0000ff"), rgb()/rgba() itp. Polski zapis (np. "niebieski") nie jest poprawną wartością CSS.
Jak ustawić kolor tekstu przez klasę CSS zamiast style?
Możesz dodać/zdjąć klasę: element.classList.add("niebieski"), a w CSS zdefiniować .niebieski { color: blue; }. To zwykle lepsza praktyka niż style inline, bo oddziela logikę (JS) od wyglądu (CSS).
Kiedy getElementById może zwrócić null i co wtedy zrobić?
Zwróci null, gdy w dokumencie nie ma elementu o danym id albo kod wykona się przed wczytaniem HTML. Rozwiązania: uruchomić skrypt po załadowaniu DOM (np. po zdarzeniu DOMContentLoaded) albo umieścić skrypt na końcu body.
Jakie są typowe błędy w zadaniach o zmianę stylu elementu DOM?
Najczęstsze pomyłki to: brak .style, mylenie color z backgroundColor, użycie zapisu CSS z myślnikiem zamiast camelCase oraz literówki w id. Na egzaminie zawsze sprawdź, czy zmieniasz właściwą cechę i poprawną nazwę.
Jak przygotować się do zadań DOM i CSS na egzamin INF.3?
Ćwicz krótkie scenariusze: pobranie elementu po id/klasie, zmiana tekstu, atrybutu i stylu. Naucz się mapowania CSS→JS (np. background-color→backgroundColor). Warto też przećwiczyć obsługę zdarzeń (click, input) i classList.
info

Statystycznie 65% uczniów zna prawidłową odpowiedź. średnie

Według specjalistów z branży: "Aby zmienić kolor tekstu akapitu o id "jeden", trzeba pobrać element z DOM i ustawić właściwość CSS przez obiekt style: style.color."

Źródła:

  • MDN Web Docs: Document.getElementById() — https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById (dostęp: 18.02.2026)
  • MDN Web Docs: HTMLElement.style — https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style (dostęp: 18.02.2026)
  • MDN Web Docs: CSSStyleDeclaration.color — https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/color (dostęp: 18.02.2026)

Materiały:

  • Dokumentacja MDN: DOM i selekcja elementów
  • Dokumentacja MDN: właściwość style i CSSStyleDeclaration
  • Ćwiczenia: zmiana stylów elementów po zdarzeniach (click, input)
Zobacz też:

Aktualizacja pytania: 31.03.2026



Aktualizacja pytania: 31.03.2026
📡 Brak połączenia internetowego