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