Fjern alle stiler fra et element ved hjelp av JavaScript
I prosessen med å oppdatere en webside eller nettstedet, kan det være et krav om å fjerne all styling eller en del av det fra et bestemt element. I tillegg til det, legge til effekter og advarsel/feilmeldinger på museklikk eller sveve. I slike tilfeller, å fjerne alle stiler fra et element som bruker JavaScript, lurer på å fange brukerens oppmerksomhet og få nettstedet til å skille seg ut.
Denne bloggen vil diskutere tilnærmingene for å fjerne alle stiler fra et element i JavaScript.
Hvordan fjerne/utelate alle stiler fra et element i JavaScript?
For å fjerne alle stiler fra et element i JavaScript, kan følgende tilnærminger brukes:
- “Fjerning ()”Metode.
- “stil”Eiendom.
- “jQuery”Metoder.
La oss følge hver av tilnærmingene en etter en!
Tilnærming 1: Fjern alle stiler fra et element i JavaScript ved hjelp
“Fjerning ()”Metode utelater et attributt fra et element. Denne metoden kan brukes for å utelate alle inkluderte stiler fra et spesifikt element.
Syntaks
element.Fjerning (navn)
I den gitte syntaks:
- “Navn”Henviser til attributtets navn.
Eksempel
La oss oversikt følgende eksempel:
Dette er Linuxhint -nettstedet
I ovennevnte kodebit:
- Inkluderer den angitte overskriften som har den spesifiserte “id" og "stil" Egenskap.
- I JavaScript -delen av koden, får du tilgang til den medfølgende overskriften fra dens “id" bruker "getElementById ()”Metode.
- I neste trinn, bruk "Fjerning ()”Metode som har attributtet“stil”Som parameter.
- Dette vil resultere i å fjerne den spesifiserte stylingen fra overskriften.
Før du fjerner stilen
Etter å ha fjernet stilen
Fra begge de ovennevnte bildebitene kan forskjellen før og etter at fjerning av stilen kan observeres.
Tilnærming 2: Fjern spesifikke stiler fra et element i JavaScript ved hjelp av stilegenskaper
“stil”Eiendom gir verdien av et elements stilattributt. Denne egenskapen kan implementeres for å fjerne en bestemt egenskap som finnes i stilattributtet.
Syntaks
element.stil.Eiendom = verdi
I syntaks ovenfor:
- “verdi”Tilsvarer verdien som refererer til den spesifiserte egenskapen.
Eksempel
La oss gå gjennom følgende eksempel:
JavaScript er et veldig effektivt programmeringsspråk. Det er veldig nyttig i å designe en webside eller nettstedet. Det kan også integreres med HTML for å implementere noen ekstra funksjoner også.
Utfør følgende trinn som gitt i kodelinjene ovenfor:
- Inkluder et avsnittselement som har det spesifiserte “id" og "stil”Attributt bestående av de uttalte egenskapene.
- Opprett også en knapp med en vedlagt "ved trykk”Arrangement som påkaller funksjonen Fjerning ().
- I neste trinn får du tilgang til det inneholdte avsnittet ved å bruke "id”I“getElementById ()”Metode.
- Til slutt, tilordne eiendommen “bredde" som "null”.
- Dette vil fjerne breddeegenskapen i "stil”Attributt av avsnittet på knappeklikk.
Produksjon
I ovennevnte utgang, “bredde”Av avsnittet fjernes på knappeklikk.
Tilnærming 3: Fjern alle stiler fra et element i JavaScript ved hjelp av jQuery
JQuery -tilnærmingen kan brukes for å hente det inkluderte elementet direkte og fjerne stylingen på knappeklikket.
Eksempel
Det undergitte eksemplet forklarer det uttalte konseptet.
Før du fjerner stilen
I kodelinjene ovenfor:
- Inkluder den angitte overskriften. Legg også til det spesifiserte bildet med "id”Og dens faste dimensjoner i“stil" Egenskap.
- Etter det, lag en knapp som har den spesifiserte “id”.
- I jQuery -delen av koden får du tilgang til den opprettede knappen. På knappeklikk vil den oppgitte funksjonen bli utløst.
- I funksjonsdefinisjonen får du tilgang til det inneholdte bildet av dets “id”Direkte.
- Bruk også “Fjerningsr ()”Metode som har attributtet“stil”Som parameter.
- Dette vil resultere i å neglisjere bildens faste dimensjoner, og dermed fjerne elementets stil på knappeklikk.
Produksjon
Fra output ovenfor er det tydelig at bildens faste dimensjoner innenfor "stil”Attributt påvirker ikke knappeklikket.
Konklusjon
“Fjerning ()”Metode,“stil”Eiendom, eller“jQuery”Tilnærming kan brukes til å fjerne alle stiler fra et element ved hjelp av JavaScript. Fjerningsmetoden () -metoden kan brukes for å fjerne all styling fra det tilgjengelige elementet direkte. Stilegenskapen kan implementeres for å fjerne en bestemt stil i "stil”Attributt fra et element. JQuery -tilnærmingen kan brukes for å oppnå samme funksjonalitet. Denne opplæringen forklarer hvordan du fjerner/utelater alle stiler fra et spesifikt element i JavaScript.