Jak zmienić kolor tekstu w JavaScript

JavaScript to dynamiczny język, który zapewnia różne opcje programowania do wykonywania wielu zadań. Na przykład zmiana koloru elementu jest jednym z najczęstszych zadań podczas opracowywania strony internetowej. Aby to zrobić, najpierw uzyskaj odniesienie do elementu HTML, który chcesz zmienić kolor, a następnie przypisz go wartość koloru w atrybucie koloru stylu JavaScript.

To badanie ilustruje metody zmiany koloru tekstu w JavaScript.

Jak zmienić kolor tekstu w JavaScript?

Aby zmienić kolor tekstu w JavaScript, użyj poniżej określonych predefiniowanych metod JavaScript:

• styl.Kolorowa właściwość z metodą getElementById ()
• styl.właściwość kolorów z metodą QuerySelelect ()

Wyjaśnijmy te metody indywidualnie.

Metoda 1: Zmień kolor tekstu za pomocą stylu.Kolorowa właściwość z metodą getElementById ()

Aby zmienić kolor tekstu, możesz użyć „getElementById ()„Metoda z„styl.kolor" nieruchomość. W takim scenariuszu dostęp do elementu tekstowego można uzyskać za pomocą metody getElementById (), a następnie zastosować atrybut kolorów za pomocą stylu HTML.Własność kolorowa.

Składnia

Użyj podanej składni do zmiany koloru tekstu, używając właściwości kolorów za pomocą metody getElementById ():

dokument.getElementById („id”).styl.color = "Color";

„„ID”To identyfikator elementu określony w celu uzyskania dostępu do elementu tekstowego, a następnie zmiany jego koloru za pomocą stylu.Własność kolorowa.

Skieruj się w kierunku poniższego przykładu, aby zrozumieć określoną koncepcję!

Przykład

Najpierw utworzymy nagłówek za pomocą

Tag i przypisz identyfikator „ID”, Który służy do dostępu do elementu H4, a następnie utworzyć przycisk, który wywołuje funkcję o nazwie„Zmień kolor()”Zdefiniowane w pliku JavaScript (JS), gdy zdarzenie OnClick dodanego przycisku zostanie uruchomione:

Witamy w Linuxhint

Kliknij, aby zobaczyć magię

W pliku JS zdefiniuj funkcję o nazwie „Zmień kolor()”I zdobądź nagłówek, przekazując swój identyfikator metody GetElementById (), a następnie zmień jej kolor:

funkcja ChangeColor ()
dokument.getElementById („id”).styl.color = „czerwony”;

Na koniec określ źródło pliku JavaScript za pomocą znacznika SRC w pliku HTML:

Z wyjścia można zobaczyć, że po kliknięciu dodanego przycisku element tekstowy zmienił swój kolor na „czerwony”:

Sprawdźmy drugą metodę!

Metoda 2: Zmień kolor tekstu za pomocą stylu.właściwość kolorów z metodą QuerySelelect ()

Możesz także zmienić kolor tekstu za pomocą „QuerySelelect ()„Metoda ze stylem.Własność kolorowa. Dostępuje do elementu zarówno z ID, jak i przy przypisanej klasie, podczas gdy metoda getElementById () po prostu pobiera element za pomocą przypisanego identyfikatora.

Składnia

Użyj następującej składni, aby zmienić kolor tekstu za pomocą właściwości kolorów za pomocą metody QuerySelector ():

dokument.querySelelector („id/className”).styl.color = "Color";

Przykład

Tutaj użyjemy

tag, aby dodać akapit z klasą o nazwie „kolor”, To pomoże uzyskać dostęp do

element i przycisk, który wywoła JavaScript „Zmień kolor()„Metoda, gdy zostanie uruchomione zdarzenie onclick:

Witamy w Linuxhint

Kliknij, aby zobaczyć magię

W definicji „Zmień kolor()„Metoda, wywołamy„QuerySelelect ()„Metoda, przekazując nazwę klasy z DOT (.) Wskazuje, że element jest dostępny na podstawie jego nazwy klasy, a następnie zastosuj na nim właściwość kolorów:

funkcja ChangeColor ()
dokument.querySelelector (".kolor").styl.color = "magenta";

Jednak, aby użyć identyfikatora w elemencie HTML i dostępu do niego za pomocą metody QuerySelelect (), dodaj „#„Podpis z nazwą identyfikatora:

dokument.querySelelector („#Color”).styl.color = "magenta";

Wyjście

Zebraliśmy najprostsze podejście do zmiany koloru tekstu w JavaScript.

Wniosek

Aby zmienić kolor tekstu, możesz użyć stylu.właściwość kolorów za pomocą metody GetElementById () lub metody QuerySelelect (). Metoda getElementById () służy do dostępu do elementu HTML na podstawie jego przypisanego identyfikatora, podczas gdy metoda QuerySelelect () uzyskuje dostęp do elementu na podstawie przypisanego identyfikatora lub klasy poprzez określenie (#) lub (.) Znaki odpowiednio. To badanie ilustruje prostą procedurę zmiany koloru tekstu w JavaScript.