Ова студија ће илустровати методе за промену боје текста у ЈаваСцрипт-у.
Како променити боју текста у ЈаваСцрипт-у?
За промену боје текста у ЈаваСцрипт-у користите доле наведене унапред дефинисане ЈаваСцрипт методе:
Објаснимо ове методе појединачно.
Метод 1: Промените боју текста користећи својство стиле.цолор са методом гетЕлементБиИд()
Да бисте променили боју текста, можете користити „ гетЕлементБиИд() ” метод са „ стил.боја ' имовина. У таквом сценарију, текстуалном елементу се може приступити помоћу методе гетЕлементБиИд(), а затим применити атрибут боје уз помоћ својства ХТМЛ стиле.цолор.
Синтакса
Користите дату синтаксу за промену боје текста коришћењем својства боје уз помоћ гетЕлементБиИд() методе:
документ. гетЕлементБиИд ( 'ид' ) . стил . боја = 'боја' ;„ ид ” је ид елемента наведен за приступ текстуалном елементу, а затим промену његове боје помоћу својства стиле.цолор.
Идите на пример у наставку да бисте разумели наведени концепт!
Пример
Прво ћемо креирати наслов користећи <х4> означите и доделите ИД “ ид ” који се користи за приступ елементу х4, а затим креирајте дугме које позива функцију под називом „ променити боју() ” дефинисан у ЈаваСцрипт(ЈС) датотеци када се покрене догађај онцлицк доданог дугмета:
< х4 ид = 'ид' > Добродошли у ЛинукХинт х4 >< тип дугмета = 'дугме' онцлицк = 'променити боју()' > Кликните да бисте видели магију дугме >
У ЈС датотеци дефинишите функцију под називом „ променити боју() ” и добијте наслов тако што ћете проследити његов ид методи гетЕлементБиИд(), а затим променити његову боју:
функција променаБоја ( ) {документ. гетЕлементБиИд ( 'ид' ) . стил . боја = 'црвено' ;
}
На крају, наведите извор ЈаваСцрипт датотеке користећи срц ознаку у ХТМЛ датотеци:
< сцрипт срц = './ЈСфиле.јс' > скрипта >Из излаза се може видети да када се кликне на дугме за додавање, текстуални елемент је променио боју у „ црвена ”:
Хајде да погледамо другу методу!
Метод 2: Промена боје текста помоћу својства стиле.цолор са методом куериСелецтор().
Такође можете променити боју текста помоћу „ куериСелецтор() ” метод са својством стиле.цолор. Он приступа елементу и са ИД-ом или са додељеном класом, док метода гетЕлементБиИд() само преузима елемент са додељеним ИД-ом.
Синтакса
Користите следећу синтаксу да промените боју текста користећи својство боје уз помоћ методе куериСелецтор():
документ. куериСелецтор ( 'ид/име класе' ) . стил . боја = 'боја' ;Пример
Овде ћемо користити <п> таг за додавање параграфа са класом под називом „ боја “, што ће помоћи да се приступи елементу <п> и дугмету које ће позвати ЈаваСцрипт „ променити боју() ” када ће се његов догађај онцлицк покренути:
< стр класа = 'боја' > Добродошли у ЛинукХинт стр >< дугме онцлицк = 'променити боју()' > Кликните да бисте видели магију дугме >
У дефиницији „ променити боју() ” метод, ми ћемо позвати „ куериСелецтор() ” преношењем имена класе са тачком(.) што указује да се елементу приступа на основу имена класе, а затим примените својство боје на њега:
функција променаБоја ( ) {документ. куериСелецтор ( '.цолор' ) . стил . боја = 'магента' ;
}
Међутим, да бисте користили ИД у ХТМЛ елементу и приступили му помоћу методе куериСелецтор(), додајте „ # ” знак са ИД именом:
документ. куериСелецтор ( '#боја' ) . стил . боја = 'магента' ;Излаз
Прикупили смо најједноставнији приступ за промену боје текста у ЈаваСцрипт-у.
Закључак
За промену боје текста можете користити својство стиле.цолор уз помоћ методе гетЕлементБиИд() или методе куериСелецтор(). Метод гетЕлементБиИд() се користи за приступ ХТМЛ елементу на основу његовог додељеног ИД-а, док метода куериСелецтор() приступа елементу на основу додељеног ИД-а или класе навођењем (#) или (.) знакова, респективно. Ова студија је илустровала једноставну процедуру за промену боје текста у ЈаваСцрипт-у.