Tato studie bude ilustrovat metody pro změnu barvy textu v JavaScriptu.
Jak změnit barvu textu v JavaScriptu?
Pro změnu barvy textu v JavaScriptu použijte níže uvedené předdefinované metody JavaScriptu:
Pojďme si tyto metody vysvětlit jednotlivě.
Metoda 1: Změna barvy textu pomocí vlastnosti style.color s metodou getElementById().
Chcete-li změnit barvu textu, můžete použít „ getElementById() “ metoda s “ styl.barva ' vlastnictví. V takovém scénáři lze k textovému prvku přistupovat pomocí metody getElementById() a poté použít atribut color pomocí vlastnosti HTML style.color.
Syntax
Použijte danou syntaxi pro změnu barvy textu pomocí vlastnosti color s pomocí metody getElementById():
dokument. getElementById ( 'id' ) . styl . barva = 'barva' ;' id ” je ID prvku určené pro přístup k textovému prvku a poté změnit jeho barvu pomocí vlastnosti style.color.
Přejděte k níže uvedenému příkladu, abyste pochopili uvedený koncept!
Příklad
Nejprve vytvoříme nadpis pomocí označit a přiřadit id “ id “, který se používá pro přístup k prvku h4, poté vytvořte tlačítko, které vyvolá funkci s názvem „ změnit barvu() ” definované v souboru JavaScript(JS), když se spustí událost onclick přidaného tlačítka:
< h4 id = 'id' > Vítejte v LinuxHintu h4 >< typ tlačítka = 'knoflík' při kliknutí = 'změnit barvu()' > Kliknutím zobrazíte kouzlo knoflík >
V souboru JS definujte funkci s názvem „ změnit barvu() ” a získejte záhlaví předáním jeho id metodě getElementById() a poté změňte jeho barvu:
funkce změna barvy ( ) {dokument. getElementById ( 'id' ) . styl . barva = 'Červené' ;
}
Nakonec určete zdroj souboru JavaScript pomocí značky src v souboru HTML:
< skript src = './JSfile.js' > skript >Z výstupu je vidět, že po kliknutí na přidané tlačítko změnil textový prvek svou barvu na „ Červené “:
Podívejme se na další metodu!
Metoda 2: Změna barvy textu pomocí vlastnosti style.color s metodou querySelector().
Můžete také změnit barvu textu pomocí „ querySelector() ” metoda s vlastností style.color. Přistupuje k prvku jak s id, tak s přiřazenou třídou, zatímco metoda getElementById() pouze načítá prvek s přiřazeným id.
Syntax
Ke změně barvy textu pomocí vlastnosti color s pomocí metody querySelector() použijte následující syntaxi:
dokument. querySelector ( 'id/className' ) . styl . barva = 'barva' ;Příklad
Zde použijeme tag pro přidání odstavce s třídou s názvem „ barva “, který pomůže získat přístup k prvku
a tlačítku, které bude volat JavaScript „ změnit barvu() ” způsob, kdy bude spuštěna jeho událost onclick:
< p třída = 'barva' > Vítejte v LinuxHintu p >< tlačítko onclick = 'změnit barvu()' > Kliknutím zobrazíte kouzlo knoflík >
V definici „ změnit barvu() “, vyvoláme metodu “ querySelector() ” předáním názvu třídy s tečkou(.), která označuje, že se k prvku přistupuje na základě jeho názvu třídy, a poté na něj aplikujte vlastnost color:
funkce změna barvy ( ) {dokument. querySelector ( '.barva' ) . styl . barva = 'Purpurová' ;
}
Chcete-li však použít id v prvku HTML a přistupovat k němu pomocí metody querySelector(), přidejte „ # ” znak s ID jménem:
dokument. querySelector ( '#barva' ) . styl . barva = 'Purpurová' ;Výstup
Shromáždili jsme nejjednodušší přístup ke změně barvy textu v JavaScriptu.
Závěr
Pro změnu barvy textu můžete použít vlastnost style.color s pomocí metody getElementById() nebo querySelector(). Metoda getElementById() se používá k přístupu k prvku HTML na základě jeho přiřazeného id, zatímco metoda querySelector() přistupuje k prvku na základě přiřazeného id nebo třídy zadáním znaků (#) nebo (.). Tato studie ilustrovala jednoduchý postup pro změnu barvy textu v JavaScriptu.