Deze studie illustreert de methoden voor het wijzigen van de kleur van de tekst in JavaScript.
Hoe de tekstkleur in JavaScript te wijzigen?
Gebruik de onderstaande vooraf gedefinieerde JavaScript-methoden om de tekstkleur in JavaScript te wijzigen:
- style.color eigenschap met getElementById() methode
- style.color eigenschap met querySelector() methode
Laten we deze methoden afzonderlijk uitleggen.
Methode 1: Wijzig de tekstkleur met behulp van de eigenschap style.color met de methode getElementById()
Om de kleur van de tekst te wijzigen, kunt u de ' getElementById() ” methode met de “ stijl.kleur ' eigendom. In een dergelijk scenario kan het tekstelement worden geopend met behulp van de methode getElementById() en vervolgens het kenmerk color toepassen met behulp van de eigenschap HTML style.color.
Syntaxis
Gebruik de gegeven syntaxis voor het wijzigen van de tekstkleur door de eigenschap color te gebruiken met behulp van de methode getElementById() :
document. getElementById ( 'ID kaart' ) . stijl . kleur = 'kleur' ;De ' ID kaart ” is de id van het element die is opgegeven om toegang te krijgen tot het tekstelement en vervolgens de kleur ervan te wijzigen met behulp van de eigenschap style.color.
Ga naar het onderstaande voorbeeld om het genoemde concept te begrijpen!
Voorbeeld
Eerst maken we een kop met tag en wijs een id toe “ ID kaart ' die wordt gebruikt om toegang te krijgen tot het h4-element, maak vervolgens een knop die een functie oproept met de naam ' verander kleur() ” gedefinieerd in een JavaScript(JS)-bestand wanneer de onclick-gebeurtenis van de toegevoegde knop wordt geactiveerd:
< h4 id = 'ID kaart' > Welkom bij LinuxHint h4 >< type knop = 'knop' bij klikken = 'verander kleur()' > Klik om de magie te zien knop >
Definieer in het JS-bestand een functie met de naam ' verander kleur() ” en haal de kop op door de id door te geven aan de methode getElementById() en vervolgens de kleur ervan te wijzigen:
functie veranderingKleur ( ) {document. getElementById ( 'ID kaart' ) . stijl . kleur = 'rood' ;
}
Specificeer ten slotte de bron van het JavaScript-bestand met behulp van de src-tag in het HTML-bestand:
< script src = './JSbestand.js' > script >Uit de uitvoer blijkt dat wanneer op de toegevoegde knop wordt geklikt, het tekstelement van kleur veranderde in ' rood ”:
Laten we eens kijken naar de andere methode!
Methode 2: Tekstkleur wijzigen met de eigenschap style.color met de methode querySelector()
U kunt de kleur van de tekst ook wijzigen met de ' querySelector() ”-methode met de eigenschap style.color. Het heeft toegang tot het element met zowel id als de toegewezen klasse, terwijl de methode getElementById() gewoon het element ophaalt met zijn toegewezen id.
Syntaxis
Gebruik de volgende syntaxis om de tekstkleur te wijzigen met behulp van de eigenschap color met behulp van de methode querySelector():
document. querySelector ( 'id/klasseNaam' ) . stijl . kleur = 'kleur' ;Voorbeeld
Hier gebruiken we de tag om een alinea toe te voegen met de klasse ' kleur ”, dat zal helpen om toegang te krijgen tot het
-element en een knop die het JavaScript zal noemen “ verander kleur() ”-methode wanneer de onclick-gebeurtenis wordt geactiveerd:
< p klas = 'kleur' > Welkom bij LinuxHint p >< knop onclick = 'verander kleur()' > Klik om de magie te zien knop >
In de definitie van de “ verander kleur() ”-methode, zullen we de “ querySelector() ” methode door klassenaam door te geven met punt (.) die aangeeft dat het element wordt benaderd op basis van de klassenaam, en vervolgens de kleureigenschap erop toe te passen:
functie veranderingKleur ( ) {document. querySelector ( '.kleur' ) . stijl . kleur = 'Magenta' ;
}
Als u echter een id in een HTML-element wilt gebruiken en deze wilt openen met de methode querySelector(), voegt u de ' # ” teken met id naam:
document. querySelector ( '#kleur' ) . stijl . kleur = 'Magenta' ;Uitgang:
We hebben de eenvoudigste methode verzameld om de tekstkleur in JavaScript te wijzigen.
Conclusie
Voor het wijzigen van de tekstkleur kunt u de eigenschap style.color gebruiken met behulp van de methode getElementById() of de methode querySelector(). De methode getElementById() wordt gebruikt om toegang te krijgen tot het HTML-element op basis van het toegewezen id, terwijl de methode querySelector() het element benadert op basis van het toegewezen id of de klasse door respectievelijk (#) of (.) tekens op te geven. Deze studie illustreerde de eenvoudige procedure voor het wijzigen van de tekstkleur in JavaScript.