Kako ukloniti CSS iz Div-a pomoću jQueryja?

Kako Ukloniti Css Iz Div A Pomocu Jqueryja



Neki stažisti ili novi programeri dodaju previše stilskih svojstava da bi izgradili dizajn. Ako je dizajn napunjen s previše stilova i voditelj projekta želi vidjeti samo HTML, ovdje jQuery može ukloniti sve stilove pisanjem svojih 4 do 5 redaka koda. To je vrlo učinkovita i učinkovita metoda uklanjanja stilova i gledanja strukture tog diva ili HTML-a stranice.

Ovaj članak pokazuje različite metode za uklanjanje CSS-a iz diva pomoću jQueryja.

Kako ukloniti CSS iz Div-a pomoću jQueryja?

Da biste uklonili CSS stilove iz diva, upotrijebite ugrađene atribute jQuery. Postoje dvije metode putem kojih korisnici mogu dodavati ili uklanjati stilove, inline i koristeći klase.







Metoda 1: Uklonite ugrađeni CSS iz Div

Za uklanjanje ugrađenih stilova koji se primjenjuju na HTML element, ' removeAttr() ” koristi se metoda.



Koristi se kada je potrebno malo stilizirati element. Slijedite korake u nastavku da biste to riješili:



Korak 1: Napravite strukturu
U HTML datoteci stvorite '

” i unutar nje dodajte više HTML elemenata. Na primjer, '

”, “

' i '

” oznake se koriste u donjem kodu:





< div >
< h1 > Pozdrav korisnicima Linuxhinta < / h1 >
< h2 > Linuxhint je mjesto na nebu < / h2 >
< str > upite koji se odnose na programske jezike. < / str >
< / div >
< dugme > Uklanjanje stila za Div < / dugme >

Nakon izvršavanja gornjeg koda, web stranica izgleda ovako:





Izlaz prikazuje HTML strukturu diva i gumb.

Korak 2: Dodajte stil u tekstu
Unutar uvodne oznake div, koristi se ' stil ” pripisati i primijeniti neka CSS svojstva kako bi elementi bili istaknuti i privlačni:

< div stil = '
boja:tamnoljubičasta;
boja pozadine: srednji akvamarin;
margina: 20px;
padding: 30px;'
>
< h1 >Pozdrav korisnici Linuxhinta< / h1 >
< h2 >Linuxhint je mjesto raja< / h2 >
< str >upiti vezani uz programske jezike.< / str >
< / div >
< br >
< dugme > Stil Ukloniti za Div< / dugme >

Izlaz gornjeg koda je:

Izlaz potvrđuje da se ugrađeni stilovi primjenjuju samo na element div.

Korak 3: Upotreba jQueryja za uklanjanje ugrađenog CSS-a
Za uklanjanje atributa stila, nadređena funkcija poziva kada se ' dokument ” je “ spreman ”. U donjem kodu, unutarnja funkcija poziva kada korisnik klikne ' dugme ”. Nakon toga, ova funkcija odabire sve div elemente koji se nalaze na stranici i koristi ' ukloniti.Attr() ” metoda:

< skripta >
$ ( dokument ) .spreman ( funkcija ( ) {
$ ( 'dugme' ) .klik ( funkcija ( ) {
$ ( 'div' ) .ukloniAttr ( 'stil' ) ;
} ) ;
} ) ;
< / skripta >

Nakon dodavanja jQuery koda, web stranica radi ovako:

Gornji 'gif' ilustrira da se primijenjeni stilovi na divu uklanjaju klikom na gumb.

Metoda 2: Uklonite CSS klase iz Div

Drugi način oblikovanja HTML elementa je dodjeljivanjem ' razreda ”. Zatim dodajte CSS u taj dio klase unutar ' ' oznaku ili u zasebnom ' CSS datoteka ”. Ti se stilovi također mogu ukloniti pomoću jQueryja. Slijedite korake u nastavku:

Korak 1: Dodijelite klasu Div elementu
U HTML datoteci dodijelite atribut klase '

” element. Također, dodijelite ID 'remover' za ' ” oznaka:

< div razreda = 'stil' >
< h1 >Pozdrav korisnici Linuxhinta< / h1 >
< h2 >Linuxhint je mjesto raja< / h2 >
< str >upiti vezani uz programske jezike.< / str >
< / div >
< dugme iskaznica = 'ukloniti' > Stil Ukloni < / dugme >

Zatim idite na ' ” označite i odaberite naziv div klase “ stil ” i upišite CSS svojstva koja se primjenjuju na element div:

< stil >
.stil {
boja :zlatnik;
pozadina- boja : morsko zelena;
margina: 20px;
ispuna: 30px;
}
< / stil >

Nakon izvršavanja gornjeg koda, web stranica izgleda ovako:

Izlaz prikazuje da su stilovi primijenjeni na element div.

Korak 2: Dodajte jQuery za uklanjanje CSS stila
u ' ” dodajte jQuery kod isti kao što je navedeno u gornjoj metodi. jQuery ' removeClass() ' metoda uklanja ' stil ” koja se dodjeljuje s elementom “div” kada se klikne na gumb:

< skripta >
$ ( dokument ) .spreman ( funkcija ( ) {
$ ( 'dugme' ) .klik ( funkcija ( ) {
$ ( 'div' ) .ukloniClass ( 'stil' ) ;
} ) ;
} ) ;
< / skripta >

Nakon dodavanja gornjeg koda, web stranica radi ovako:

Gornji 'gif' ilustrira da se stilovi upisani u klasi uklanjaju pritiskom na gumb.

Zaključak

Da biste uklonili CSS iz diva, ' ukloniti.Attr() ' i ' removeClass() ” mogu se koristiti metode. ' ukloniti.Attr() ' uklanja ' stil ” iz elementa koji je odabran. S druge strane, “ removeClass() ” uklanja odabranu klasu elementa koja se koristila za primjenu stilova na taj element. Ovaj je članak uspješno pokazao kako ukloniti CSS iz diva pomoću jQueryja.