Kako odstraniti CSS iz Div z uporabo jQuery?

Kako Odstraniti Css Iz Div Z Uporabo Jquery



Nekateri pripravniki ali novi razvijalci dodajo preveč slogovnih lastnosti, da bi ustvarili dizajn. Če je dizajn naložen s preveč slogi in vodja projekta želi videti samo HTML, lahko tukaj jQuery odstrani vse sloge tako, da napiše svojih 4 do 5 vrstic kode. Je zelo učinkovita in uspešna metoda, saj odstrani sloge in si ogleda strukturo tega diva ali HTML strani.

Ta članek prikazuje različne metode za odstranitev CSS iz div z uporabo jQuery.

Kako odstraniti CSS iz Div z uporabo jQuery?

Če želite odstraniti sloge CSS iz diva, uporabite vgrajene atribute jQuery. Obstajata dve metodi, prek katerih lahko uporabniki dodajajo ali odstranjujejo sloge, inline in uporabo razredov.







1. način: Odstranite vgrajeni CSS iz Div

Če želite odstraniti vgrajene sloge, ki so uporabljeni za element HTML, uporabite » odstraniAttr() ” se uporablja metoda.



Uporablja se, ko je potrebno malo oblikovanja elementa. Sledite spodnjim korakom, da se spopadete s tem:



1. korak: Ustvarite strukturo
V datoteki HTML ustvarite »

” in vanjo dodajte več elementov HTML. Na primer, '

”, “

« in »

” so uporabljene oznake v spodnji kodi:





< div >
< h1 > Pozdravljeni uporabniki Linuxhinta < / h1 >
< h2 > Linuxhint je kraj v nebesih < / h2 >
< str > poizvedbe, povezane s programskimi jeziki. < / str >
< / div >
< gumb > Odstranjevalec sloga za Div < / gumb >

Po izvedbi zgornje kode je spletna stran videti takole:





Izhod prikazuje strukturo HTML div in gumb.

2. korak: Dodajte slog v vrstici
Znotraj začetne oznake div uporablja » stil ” in uporabite nekatere lastnosti CSS, da naredite elemente vidne in privlačne:

< div stil = '
barva: temno magenta;
barva ozadja: srednje akvamarin;
rob: 20px;
oblazinjenje: 30px;'
>
< h1 >Pozdravljeni uporabniki Linuxhinta< / h1 >
< h2 >Linuxhint je mesto v nebesih< / h2 >
< str >poizvedbe, povezane s programskimi jeziki.< / str >
< / div >
< št >
< gumb > Slog Odstrani za Div< / gumb >

Rezultat zgornje kode je:

Izhod potrjuje, da so vgrajeni slogi uporabljeni samo za element div.

3. korak: Uporaba jQuery za odstranitev vgrajenega CSS
Če želite odstraniti slogovne atribute, nadrejena funkcija pokliče, ko je ' dokument ' je ' pripravljena ”. V spodnji kodi kliče notranja funkcija, ko uporabnik klikne » gumb ”. Po tem ta funkcija izbere vse elemente div, ki se nahajajo na strani, in uporabi » odstrani.Attr() ” metoda:

< scenarij >
$ ( dokument ) .pripravljen ( funkcijo ( ) {
$ ( 'gumb' ) .kliknite ( funkcijo ( ) {
$ ( 'div' ) .removeAttr ( 'slog' ) ;
} ) ;
} ) ;
< / scenarij >

Po dodajanju kode jQuery spletna stran deluje takole:

Zgornji »gif« ponazarja, da se uporabljeni slogi na divu odstranijo s klikom na gumb.

2. način: Odstranite CSS razreda iz Div

Drugi način oblikovanja elementa HTML je, da mu dodelite ' razred ”. Nato dodajte CSS v ta del razreda znotraj » ' ali v ločenem ' datoteka CSS ”. Te sloge je mogoče odstraniti tudi z uporabo jQuery. Sledite spodnjim korakom:

1. korak: Elementu Div dodelite razred
V datoteki HTML dodelite atribut razreda elementu »

” element. Prav tako dodelite ID »odstranjevalec« za » ' oznaka:

< div razred = 'styling' >
< h1 >Pozdravljeni uporabniki Linuxhinta< / h1 >
< h2 >Linuxhint je mesto v nebesih< / h2 >
< str >poizvedbe, povezane s programskimi jeziki.< / str >
< / div >
< gumb id = 'Odstrani' > Slog Odstrani < / gumb >

Nato pojdite na » ” in izberite ime razreda div “ styling « in vnesite lastnosti CSS, ki se uporabljajo za element div:

< stil >
.styling {
barva :zlata rozga;
ozadje- barva : morsko zelena;
rob: 20px;
oblazinjenje: 30px;
}
< / stil >

Po izvedbi zgornje kode je spletna stran videti takole:

Izhod prikaže, da so slogi uporabljeni na elementu div.

2. korak: dodajte jQuery, da odstranite slog CSS
V ' ” dodajte kodo jQuery, enako kot je navedeno v zgornji metodi. jQuery ' odstranirazred() ' metoda odstrani ' styling «, ki je dodeljen z elementom »div«, ko kliknete gumb:

< scenarij >
$ ( dokument ) .pripravljen ( funkcijo ( ) {
$ ( 'gumb' ) .kliknite ( funkcijo ( ) {
$ ( 'div' ) .removeClass ( 'styling' ) ;
} ) ;
} ) ;
< / scenarij >

Po dodajanju zgornje kode spletna stran deluje takole:

Zgornji »gif« ponazarja, da se slogi, vneseni v razred, odstranijo s klikom gumba.

Zaključek

Če želite odstraniti CSS iz diva, uporabite » odstrani.Attr() « in » odstranirazred() ” se lahko uporabijo metode. ' odstrani.Attr() ' odstrani ' stil ” iz elementa, ki je izbran. Po drugi strani pa ' odstranirazred() ” odstrani izbrani razred elementa, ki je bil uporabljen za uporabo slogov na tem elementu. Ta članek je uspešno pokazal, kako odstraniti CSS iz diva s pomočjo jQuery.