Táto štúdia ilustruje metódy na zmenu farby textu v JavaScripte.
Ako zmeniť farbu textu v JavaScripte?
Na zmenu farby textu v JavaScripte použite nižšie uvedené preddefinované metódy JavaScriptu:
Vysvetlime si tieto metódy jednotlivo.
Metóda 1: Zmena farby textu pomocou vlastnosti style.color s metódou getElementById().
Ak chcete zmeniť farbu textu, môžete použiť „ getElementById() “ metóda s “ štýl.farba ' nehnuteľnosť. V takomto scenári je možné pristupovať k textovému prvku pomocou metódy getElementById() a potom použiť atribút color pomocou vlastnosti HTML style.color.
Syntax
Použite danú syntax na zmenu farby textu pomocou vlastnosti color s pomocou metódy getElementById():
dokument. getElementById ( 'id' ) . štýl . farba = 'farba' ;' id ” je identifikátor prvku určený na prístup k textovému prvku a potom na zmenu jeho farby pomocou vlastnosti style.color.
Zamierte k nižšie uvedenému príkladu, aby ste pochopili uvedený koncept!
Príklad
Najprv vytvoríme nadpis pomocou označiť a priradiť id “ id “, ktorý sa používa na prístup k prvku h4, potom vytvorte tlačidlo, ktoré vyvolá funkciu s názvom „ changeColor() ” definované v súbore JavaScript (JS), keď sa spustí udalosť onclick pridaného tlačidla:
< h4 id = 'id' > Vitajte v LinuxHint h4 >< typ tlačidla = 'tlačidlo' po kliknutí = 'changeColor()' > Kliknutím zobrazíte kúzlo tlačidlo >
V súbore JS definujte funkciu s názvom „ changeColor() ” a získajte nadpis odovzdaním jeho ID metóde getElementById() a potom zmeňte jeho farbu:
zmena funkcieFarba ( ) {dokument. getElementById ( 'id' ) . štýl . farba = 'červená' ;
}
Nakoniec zadajte zdroj súboru JavaScript pomocou značky src v súbore HTML:
< skript src = './JSfile.js' > skript >Z výstupu je vidieť, že po kliknutí na pridané tlačidlo zmenil textový prvok svoju farbu na „ červená “:
Pozrime sa na inú metódu!
Metóda 2: Zmena farby textu pomocou vlastnosti style.color s metódou querySelector().
Farbu textu môžete zmeniť aj pomocou „ querySelector() ” metóda s vlastnosťou style.color. Pristupuje k prvku s id alebo s priradenou triedou, zatiaľ čo metóda getElementById() len načíta prvok s priradeným id.
Syntax
Na zmenu farby textu pomocou vlastnosti color pomocou metódy querySelector() použite nasledujúcu syntax:
dokument. querySelector ( 'id/className' ) . štýl . farba = 'farba' ;Príklad
Tu použijeme tag na pridanie odseku s triedou s názvom „ farba “, ktorý pomôže získať prístup k prvku
a tlačidlu, ktoré bude volať JavaScript „ changeColor() ” spôsob, kedy sa spustí jeho udalosť onclick:
< p trieda = 'farba' > Vitajte v LinuxHint p >< tlačidlo onclick = 'changeColor()' > Kliknutím zobrazíte kúzlo tlačidlo >
V definícii „ changeColor() “, vyvoláme metódu “ querySelector() ” zadaním názvu triedy s bodkou (.), ktorá označuje, že k prvku sa pristupuje na základe jeho názvu triedy, a potom naň aplikujte vlastnosť color:
zmena funkcieFarba ( ) {dokument. querySelector ( '.farba' ) . štýl . farba = 'purpurová' ;
}
Ak však chcete použiť id v elemente HTML a pristupovať k nemu pomocou metódy querySelector(), pridajte „ # ” podpísať s identifikačným menom:
dokument. querySelector ( '#farba' ) . štýl . farba = 'purpurová' ;Výkon
Zhromaždili sme najjednoduchší prístup k zmene farby textu v JavaScripte.
Záver
Na zmenu farby textu môžete použiť vlastnosť style.color pomocou metódy getElementById() alebo querySelector(). Metóda getElementById() sa používa na prístup k prvku HTML na základe jeho priradeného id, zatiaľ čo metóda querySelector() pristupuje k prvku na základe priradeného id alebo triedy zadaním znakov (#) alebo (.). Táto štúdia ilustrovala jednoduchý postup zmeny farby textu v JavaScripte.