logo

ЈаваСцрипт цлассЛист

ЈаваСцрипт цлассЛист је ДОМ својство ЈаваСцрипт-а које омогућава стилизовање ЦСС (каскадни стилски лист) класа елемента. ЈаваСцрипт цлассЛист је својство само за читање које враћа имена ЦСС класа. То је својство ЈаваСцрипт-а у односу на друга својства ЈаваСцрипт-а које укључује стил и име класе. Својство стиле враћа боју или други стил елемента ЦСС класе, а цлассНаме се користи за враћање имена класа које се користе у ЦСС датотеци. Међутим, својства цлассНаме и цлассЛист враћају назив класа које смо користили у ЦСС датотеци, али на различите начине. Својство цлассНаме враћа име класа у облику стринга, док својство цлассЛист ЈаваСцрипт враћа назив класа у облику низа.

Овде ћемо узети кратку дискусију о ЈаваСцрипт цлассЛист и такође разговарати о његовим методама са њиховим практичним имплементацијама.

израз регресије у Јави

Пример својства ЈаваСцрипт цлассЛист

Испод је пример ЈаваСцрипт својства цлассЛист преко којег ћемо добити вредност класе елемента.

 <h3>Click on the button to get the class value </h3><br> function getClass() { var e = document.getElementById(&apos;btn&apos;); alert(e.classList); } 

Излаз горњег кода је приказан у наставку:

ЈаваСцрипт цлассЛист

Својство ЈаваСцрипт цлассЛист

Својство цлассЛист се користи за представљање вредности елемената класе која је а ДОМТокенЛист објекат. То је својство само за читање, али можемо изменити његову вредност манипулисањем класама које се користе у програму. Својство ЈаваСцрипт цлассЛист се састоји од следећих метода помоћу којих можемо да изведемо различите операције над елементима класе:

    додати():Метода адд() се користи за додавање једне или више класа елементу.уклони():Метода ремове() се користи за уклањање једне или више класа из броја класа присутних у елементу.искључи():Метод тоггле() се користи за пребацивање наведених имена класа елемента. То значи да се једним кликом одређена класа додаје, а другим кликом се класа уклања. Познато је као својство преклапања елемента.заменити():Метод реплаце() се користи за замену постојеће класе новом класом.садржи():Метод цонтаинс() својства ЈаваСцрипт цлассЛист се користи за враћање Булове вредности као излаза. Ако је класа присутна, вредност се враћа као тачна, иначе се враћа нетачно.итем():Метода итем() се користи за приказ имена класа на одређеном индексу. Дакле, враћа име класе.

Ово су неке од метода које се користе у ЈаваСцрипт цлассЛист.

Разговараћемо један по један.

стринг у јсонобјецт

цлассЛист.адд()

Функција која се користи за додавање једне или више класа ЦСС елементу.

Пример:

Пример испод показује како да додате класу помоћу методе цлассЛист.адд():

 .myClass {background: red;} <h3> Click on the button and add the class</h3> <br> function getClass() { var e = document.getElementById(&apos;Btn&apos;); e.classList.add(&apos;myClass&apos;); } 

У коду, када корисник кликне на дугме, нова класа се додаје са постојећим класама. Резултат након клика на дугме је приказан у наставку:

ЈаваСцрипт цлассЛист

цлассЛист.ремове()

Функција ремове() се користи за уклањање постојећих класа из елемената.

Пример у наставку показује како да уклоните једну или више класа помоћу методе цласслист.ремове():

 .myClass {background: red;} <h3> Click on the button and remove the class </h3> <br> function getClass() { var e = document.getElementById(&apos;Btn&apos;); e.classList.remove(&apos;myClass&apos;); } 

У горњем коду, када корисник кликне на дугме, одређена наведена класа се уклања из постојећих ЦСС класа. Резултат након клика на дугме је приказан у наставку:

ЈаваСцрипт цлассЛист

Цласслист.тоггле()

Дугме тоггле() се користи за пребацивање класа на елемент. То значи додавање нове класе или уклањање постојећих класа.

Испод је пример који ће нам помоћи да разумемо како да користимо метод тоггле() за додавање или уклањање класа.

Пример:

 .myClass1{background: red;} .myClass2 {background: blue;} <h3> Click on the button to add or remove the class</h3> <br> function get_toggle() { var e = document.getElementById(&apos;Btn&apos;); e.classList.toggle(&apos;myClass2&apos;); } 

У коду, када корисник кликне на дугме, класа ће бити додата или уклоњена из ЦСС класа. Резултат након клика на дугме је приказан у наставку:

колико је милиона у милијарду
ЈаваСцрипт цлассЛист

Цласслист.цонтаинс()

Метода цонтаинс() се користи да провери да ли наведена класа постоји у ЦСС класама и у односу на њу, враћа Булову вредност као тачну или нетачну.

Испод је пример који показује како да тражите класу ако постоји или не користећи метод цонтаинс():

Пример:

 function getClass() { var e = document.getElementById(&apos;Btn&apos;); document.write(e.classList.contains(&apos;myClass&apos;)+&apos; <br>&apos;+&apos;myclass is the name of the class&apos;); } 

У горњем коду се види да када корисник кликне на дугме, онда проверава да ли је наведена класа присутна у ЦСС класама. Ако је присутна, биће враћена Боолеан вредност као тачна. У супротном, вратиће се нетачно. Излаз горњег кода након клика на дугме је приказан испод:

ЈаваСцрипт цлассЛист

цласслист.реплаце()

Метод реплаце() се користи за замену постојеће класе новом. То не значи да је класа уклоњена из елемената, али се својства постојеће класе замењују својствима нове класе.

Испод је пример кроз који ћемо разумети како можемо да заменимо постојећу класу новом:

пронађи мој ипхоне андроид

Пример:

 .myClass1 {background: red;} .myClass2 {background: blue;} function replace_Class() { var e = document.getElementById(&apos;Btn&apos;); e.classList.replace(&apos;myClass1&apos;, &apos;myClass2&apos;); } 

У горњем коду, када корисник кликне на дугме, постојећа својства класе се замењују новим својствима класе. Резултат након клика на дугме је приказан у наставку:

ЈаваСцрипт цлассЛист

цлассЛист.итем()

Функција итем() се користи за враћање имена класе која је присутна на наведеној вредности индекса.

Испод је пример који ће нам помоћи да разумемо како да користимо методу итем() за враћање вредности:

Пример:

 <h3> Click on the button to get the specified index value</h3><br> function get_Class() { var e = document.getElementById(&apos;Btn&apos;); alert(e.classList.item(2)); } 

У коду, када корисник кликне на дугме, биће приказана класа присутна на наведеном индексу. Након што кликнете на дугме, добијамо наведену вредност класе индекса, као што је приказано у наставку:

како надоградити Јава
ЈаваСцрипт цлассЛист

Ово су неке од метода ДОМ објекта цлассЛист и све о цлассЛист.