To badanie zilustruje metody zmiany koloru tekstu w JavaScript.
Jak zmienić kolor tekstu w JavaScript?
Aby zmienić kolor tekstu w JavaScript, użyj poniższych predefiniowanych metod JavaScript:
Wyjaśnijmy te metody indywidualnie.
Metoda 1: Zmień kolor tekstu za pomocą właściwości style.color z metodą getElementById()
Aby zmienić kolor tekstu, możesz użyć „ pobierzElementById() ” metoda z „ styl.kolor ' własność. W takim scenariuszu dostęp do elementu tekstowego można uzyskać za pomocą metody getElementById(), a następnie zastosować atrybut color za pomocą właściwości HTML style.color.
Składnia
Użyj podanej składni do zmiany koloru tekstu za pomocą właściwości color za pomocą metody getElementById():
dokument. getElementById ( 'ID' ) . styl . kolor = 'kolor' ;„ ID ” to identyfikator elementu określony w celu uzyskania dostępu do elementu tekstowego, a następnie zmiany jego koloru za pomocą właściwości style.color.
Przejdź do poniższego przykładu, aby zrozumieć podaną koncepcję!
Przykład
Najpierw utworzymy nagłówek za pomocą tag i przypisz identyfikator „ ID ” używany do uzyskania dostępu do elementu h4, a następnie utwórz przycisk, który wywołuje funkcję o nazwie „ Zmień kolor() ” zdefiniowane w pliku JavaScript(JS), gdy zostanie wyzwolone zdarzenie onclick dodanego przycisku:
< h4 identyfikator = 'ID' > Witamy w LinuxHint h4 >< typ przycisku = 'przycisk' na kliknięcie = 'Zmień kolor()' > Kliknij, aby zobaczyć magię przycisk >
W pliku JS zdefiniuj funkcję o nazwie „ Zmień kolor() ” i pobierz nagłówek, przekazując jego id do metody getElementById(), a następnie zmień jego kolor:
zmiana funkcji Kolor ( ) {dokument. getElementById ( 'ID' ) . styl . kolor = 'czerwony' ;
}
Na koniec określ źródło pliku JavaScript, używając tagu src w pliku HTML:
< źródło skryptu = „./plik JS.js” > scenariusz >Z danych wyjściowych widać, że po kliknięciu dodanego przycisku element tekstowy zmienił kolor na „ czerwony ”:
Sprawdźmy inną metodę!
Metoda 2: Zmień kolor tekstu za pomocą właściwości style.color z querySelector() Metoda
Możesz także zmienić kolor tekstu za pomocą „ zapytanieSelector() ” metoda z właściwością style.color. Uzyskuje dostęp do elementu zarówno z identyfikatorem, jak i przypisaną klasą, podczas gdy metoda getElementById() po prostu pobiera element z przypisanym identyfikatorem.
Składnia
Użyj następującej składni, aby zmienić kolor tekstu za pomocą właściwości color za pomocą metody querySelector():
dokument. selektor zapytań ( 'id/nazwa klasy' ) . styl . kolor = 'kolor' ;Przykład
Tutaj użyjemy tag, aby dodać akapit z klasą o nazwie „ kolor ”, które pomogą uzyskać dostęp do elementu
i przycisku, który wywoła JavaScript „ Zmień kolor() ” metoda, gdy zostanie wywołane jej zdarzenie onclick:
< p klasa = 'kolor' > Witamy w LinuxHint p >< przycisk po kliknięciu = 'Zmień kolor()' > Kliknij, aby zobaczyć magię przycisk >
W definicji „ Zmień kolor() ”, wywołamy metodę „ zapytanieSelector() ” metody, przekazując nazwę klasy z kropką (.), która wskazuje, że do elementu uzyskuje się dostęp na podstawie nazwy jego klasy, a następnie stosuje się do niego właściwość color:
zmiana funkcji Kolor ( ) {dokument. selektor zapytań ( '.kolor' ) . styl . kolor = 'Magenta' ;
}
Aby jednak użyć identyfikatora w elemencie HTML i uzyskać do niego dostęp za pomocą metody querySelector(), dodaj „ # ” znak o nazwie id:
dokument. selektor zapytań ( '#kolor' ) . styl . kolor = 'Magenta' ;Wyjście
Zebraliśmy najprostsze podejście do zmiany koloru tekstu w JavaScript.
Wniosek
Do zmiany koloru tekstu można użyć właściwości style.color za pomocą metody getElementById() lub querySelector() . Metoda getElementById() służy do uzyskiwania dostępu do elementu HTML na podstawie przypisanego identyfikatora, natomiast metoda querySelector() uzyskuje dostęp do elementu na podstawie przypisanego identyfikatora lub klasy, określając odpowiednio znaki (#) lub (.). Badanie to zilustrowało prostą procedurę zmiany koloru tekstu w JavaScript.