KWALIFIKACJA INF3 - STYCZEŃ 2019

Q: Co to jest właściwość color w CSS i co zmienia na stronie?

Właściwość color określa kolor tekstu (kolor czcionki) elementu HTML.Nie zmienia tła ani obramowania. Tło ustawia się zwykle przez background-color, a obramowanie przez border. W JavaScript odpowiada temu najczęściej zapis element.style.color.

Q: Jak JavaScript zmienia kolor tekstu po kliknięciu przycisku?

Najczęściej przypina się obsługę zdarzenia click do przycisku, a w funkcji wybiera element DOM i ustawia mu styl.Przykładowy schemat: wybór elementu (np. po id) → ustawienie style.color na wartość niebieską. Ważne: zmieniany jest wskazany element, niekoniecznie przycisk.

Q: Jakie są typowe pomyłki przy zadaniach o zmianie stylów w DOM?

Najczęstsze błędy to:mylenie color z backgroundColor,założenie, że zmiana dotyczy całego akapitu, gdy kod wskazuje tylko fragment (np. span),uznanie, że kliknięty przycisk zawsze zmienia swój wygląd.

Q: Jak odróżnić zmianę koloru fragmentu tekstu od całego zdania?

Decyduje o tym, jaki element DOM jest wybrany w kodzie.Jeśli osobny element (np. span) obejmuje tylko "Przykładowy tekst", zmiana style.color dotyczy wyłącznie tego fragmentu. Gdy wybrany jest element nadrzędny (np. cały akapit), zabarwi się całe zdanie.

Q: Co w JavaScript oznacza wybór elementu po id?

Wybór po id oznacza wskazanie jednego, konkretnego elementu w dokumencie, którego atrybut id ma daną wartość.To ogranicza zakres zmian: styl zostanie zmieniony tylko dla tego elementu. Dzięki temu łatwo przewidzieć efekt, o ile wiesz, który tekst znajduje się w tym elemencie.

Q: Czy ustawienie style.color zmienia kolor wszystkich dzieci elementu?

Zwykle tak, bo kolor tekstu jest dziedziczony.Jeśli ustawisz color na elemencie nadrzędnym, jego potomkowie (dzieci) też będą mieć ten kolor, o ile nie nadpisują go własnym stylem. Dlatego w pytaniach egzaminacyjnych ważne jest, czy skrypt wskazuje element "mały" (fragment) czy "duży" (cały blok).

Q: Jak przygotować się do zadań egzaminacyjnych o DOM i stylach?

Ćwicz trzy kroki analizy:znajdź zdarzenie (co uruchamia kod),ustal selekcję elementu (co jest modyfikowane),sprawdź właściwość CSS (co dokładnie się zmienia).To pozwala szybko odsiać odpowiedzi mylące tło, tekst i zakres elementu.

Q: Kiedy zamiast style.color lepiej użyć classList w JavaScript?

classList warto użyć, gdy stylów jest więcej lub mają być spójne w całym projekcie.Zamiast ustawiać pojedyncze style inline, dodajesz/usuwaasz klasę (np. "blue-text") i kontrolujesz wygląd w CSS. To jest czytelniejsze, łatwiejsze w utrzymaniu i częściej spotykane w praktycznych aplikacjach.

PYTANIE NR 39.

Wciśnięcie przycisku o treści "niebieski" spowoduje wykonanie przedstawionego kodu JavaScript. Jaki będzie efekt jego działania?

Ilustracja przedstawia fragment kodu HTML i JavaScript, który jest częścią pytania egzaminacyjnego z kwalifikacji zawodowej

A.	Zmiana koloru tekstu "Przykładowy tekst i skrypt" na niebieski.
B.	Zmiana koloru tekstu "i skrypt" na niebieski.
C.	Zmiana koloru przycisku na niebieski.
D.	Zmiana koloru tekstu "Przykładowy tekst" na niebieski.
	Zostaw bez odpowiedzi

Wyjaśnienie poprawnej odpowiedzi:
Efekt zależy od tego, który element DOM wskazuje kod uruchamiany po kliknięciu.
Jeśli skrypt ustawia właściwość color dla elementu zawierającego wyłącznie tekst "Przykładowy tekst", to zmieni się kolor tego fragmentu, a nie kolor przycisku ani całego zdania. Pozostałe odpowiedzi mylą zakres selekcji elementu.

Pełne wyjaśnienie:

W zadaniach tego typu kluczowe jest odróżnienie: który element został kliknięty (przycisk) od który element jest modyfikowany przez kod JavaScript. Kliknięcie przycisku powoduje wykonanie funkcji/fragmentu skryptu, ale skrypt może zmieniać styl dowolnego elementu w dokumencie.
Poprawny efekt: zmiana koloru tekstu "Przykładowy tekst" na niebieski. Taki rezultat występuje, gdy kod wybiera element zawierający ten konkretny tekst (np. po identyfikatorze lub innym selektorze) i ustawia mu styl CSS color na wartość niebieską (np. "blue" lub "#0000ff"). Właściwość color dotyczy koloru pisma (tekstu), a nie tła ani obramowania.
Dlaczego pozostałe odpowiedzi są niepoprawne:
"…tekstu "i skrypt"… — byłoby prawdą tylko wtedy, gdyby kod wskazywał element obejmujący ten fragment (np. osobny span). W typowej konstrukcji zmieniany jest jeden, konkretnie wskazany w kodzie element, a nie dowolny fragment zdania.
"…koloru przycisku… — to częsty błąd wynikający z utożsamienia klikniętego elementu z elementem modyfikowanym. Zmiana wyglądu przycisku wymagałaby ustawienia stylu dla przycisku (np. tła), a nie dla tekstu w treści strony.
"…tekstu "Przykładowy tekst i skrypt"… — byłoby poprawne, gdyby skrypt zmieniał styl elementu nadrzędnego obejmującego całe zdanie (np. cały akapit). Jeśli jednak kod wskazuje jedynie element z "Przykładowy tekst", to reszta pozostaje bez zmian.
Wskazówka egzaminacyjna: najpierw ustal, jak element jest wybierany (np. identyfikator/selekcja), potem sprawdź, jaka właściwość stylu jest ustawiana (np. color vs backgroundColor). To niemal zawsze przesądza o poprawnej odpowiedzi.

Dodatkowe pytania

Dodatkowe pytania (FAQ):

Co to jest właściwość color w CSS i co zmienia na stronie?

Właściwość color określa kolor tekstu (kolor czcionki) elementu HTML.

Nie zmienia tła ani obramowania. Tło ustawia się zwykle przez background-color, a obramowanie przez border. W JavaScript odpowiada temu najczęściej zapis element.style.color.

Jak JavaScript zmienia kolor tekstu po kliknięciu przycisku?

Najczęściej przypina się obsługę zdarzenia click do przycisku, a w funkcji wybiera element DOM i ustawia mu styl.

Przykładowy schemat: wybór elementu (np. po id) → ustawienie style.color na wartość niebieską. Ważne: zmieniany jest wskazany element, niekoniecznie przycisk.

Dlaczego kliknięcie przycisku nie musi zmieniać koloru samego przycisku?

Kliknięcie jest tylko wyzwalaczem (zdarzeniem), który uruchamia kod.

Kod może modyfikować dowolny element strony: akapit, nagłówek, span, obraz, klasę CSS itp. Jeśli skrypt wybiera element z tekstem i ustawia mu color, to zmieni się tekst, a przycisk pozostanie bez zmian.

Jakie są typowe pomyłki przy zadaniach o zmianie stylów w DOM?

Najczęstsze błędy to:

mylenie color z backgroundColor,
założenie, że zmiana dotyczy całego akapitu, gdy kod wskazuje tylko fragment (np. span),
uznanie, że kliknięty przycisk zawsze zmienia swój wygląd.

Jak odróżnić zmianę koloru fragmentu tekstu od całego zdania?

Decyduje o tym, jaki element DOM jest wybrany w kodzie.

Jeśli osobny element (np. span) obejmuje tylko "Przykładowy tekst", zmiana style.color dotyczy wyłącznie tego fragmentu. Gdy wybrany jest element nadrzędny (np. cały akapit), zabarwi się całe zdanie.

Co w JavaScript oznacza wybór elementu po id?

Wybór po id oznacza wskazanie jednego, konkretnego elementu w dokumencie, którego atrybut id ma daną wartość.

To ogranicza zakres zmian: styl zostanie zmieniony tylko dla tego elementu. Dzięki temu łatwo przewidzieć efekt, o ile wiesz, który tekst znajduje się w tym elemencie.

Czy ustawienie style.color zmienia kolor wszystkich dzieci elementu?

Zwykle tak, bo kolor tekstu jest dziedziczony.

Jeśli ustawisz color na elemencie nadrzędnym, jego potomkowie (dzieci) też będą mieć ten kolor, o ile nie nadpisują go własnym stylem. Dlatego w pytaniach egzaminacyjnych ważne jest, czy skrypt wskazuje element "mały" (fragment) czy "duży" (cały blok).

Jakie znaczenie ma tekst na przycisku "niebieski" w takim zadaniu?

Napis na przycisku jest wskazówką, ale nie jest dowodem działania kodu.

O tym, co się stanie, decyduje wyłącznie skrypt uruchamiany po kliknięciu. Tekst "niebieski" często sugeruje ustawienie koloru na niebieski, ale trzeba sprawdzić, który element zostaje zmodyfikowany.

Jak przygotować się do zadań egzaminacyjnych o DOM i stylach?

Ćwicz trzy kroki analizy:

znajdź zdarzenie (co uruchamia kod),
ustal selekcję elementu (co jest modyfikowane),
sprawdź właściwość CSS (co dokładnie się zmienia).

To pozwala szybko odsiać odpowiedzi mylące tło, tekst i zakres elementu.

Kiedy zamiast style.color lepiej użyć classList w JavaScript?

classList warto użyć, gdy stylów jest więcej lub mają być spójne w całym projekcie.

Zamiast ustawiać pojedyncze style inline, dodajesz/usuwaasz klasę (np. "blue-text") i kontrolujesz wygląd w CSS. To jest czytelniejsze, łatwiejsze w utrzymaniu i częściej spotykane w praktycznych aplikacjach.

info

To pytanie poprawnie rozwiązuje 65% zdających egzamin. średnie

W praktyce zawodowej kluczowe jest to, że pozostałe odpowiedzi mylą zakres selekcji elementu.

Źródła:

MDN Web Docs: "HTMLElement: style property" (właściwość style i ustawianie style.color), https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style - accessed 2026-02-18
MDN Web Docs: "ElementCSSInlineStyle.style" (style inline i właściwości CSS w JS), https://developer.mozilla.org/en-US/docs/Web/API/ElementCSSInlineStyle/style - accessed 2026-02-18
MDN Web Docs: "Document.getElementById()" (wybór elementu DOM), https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById - accessed 2026-02-18

Materiały:

Dokumentacja MDN: wprowadzenie do DOM i metody wyszukiwania elementów
Dokumentacja MDN: obsługa zdarzeń (addEventListener) i atrybut onclick
Ćwiczenia praktyczne: zmiana stylów elementów poprzez style oraz classList

Aktualizacja pytania: 31.03.2026

LOGOWANIE

KWALIFIKACJA INF3 - STYCZEŃ 2019

Dodatkowe pytania

Dodatkowe pytania (FAQ):

Zobacz też: