Skjul et element etter noen sekunder ved hjelp av JavaScript

Simen Ødegård
Skjul et element etter noen sekunder ved hjelp av JavaScript

Mens du designer en responsiv webside, kan det være et krav for å skjule noen ekstra funksjonaliteter etter en viss tid for å skape effekter. For eksempel å varsle en bruker via pop-up-meldingen i en begrenset periode gjør underverker i å fange brukerens oppmerksomhet, og dermed avstå fra å bli fornærmet. I slike scenarier hjelper det å skjule et element etter noen sekunder ved hjelp av JavaScript.

Denne opplæringen vil forklare konseptet med å skjule et element etter noen sekunder ved å bruke JavaScript.

Hvordan skjule et element etter noen sekunder i JavaScript?

Følgende tilnærminger kan brukes til å skjule et element etter noen sekunder ved hjelp av JavaScript:

  • “setTimeout ()”Metode med“vise”Eiendom.
  • “setTimeout ()”Metode med“synlighet”Eiendom.
  • “jQuery”Metoder.

La oss diskutere de uttalte tilnærmingene en etter en!

Tilnærming 1: Skjul et element etter noen sekunder i JavaScript ved bruk av Settimeout () -metode Wmed visningseiendommen

“setTimeout ()”Metode påkaller en funksjon etter den spesifiserte tildelte tiden. Mens “vise”Egenskaper angir det spesifiserte elementets visningstype. Disse tilnærmingene kan implementeres for å tildele en bestemt tid til det hentede elementet slik at det gjemmer seg etter den angitte tiden.

Syntaks

Settimeout (Func, Milli, par1, par2)

I den ovennevnte syntaks:

  • “func”Indikerer funksjonen som må nås.
  • “Milli”Tilsvarer tidsintervallet i millisekunder å utføre.
  • “par1”Og“par2”Pek på tilleggsparametrene.
Gjenstand.stil.display = 'ingen'

I syntaks ovenfor:

  • Visningsegenskapen til “Gjenstand”Er tildelt som“ingen”.

Eksempel

Følgende eksempel illustrerer det uttalte konseptet:




Bruk trinnene under gitt, som gitt i koden ovenfor:

  • For det første, inkluder en "”Element som har“src”Og“id”Som dets attributter.
  • I JS -koden, bruk "setTimeout ()”Metode til de uttalte kodelinjene. Den angitte tiden, i dette tilfellet, vil være 5000 millisekunder = “5”Sekunder.
  • Innenfor metoden får tilgang til det inkluderte elementet av dets “id" bruker "getElementById ()”Metode.
  • Etter det, tilordne “vise”Eiendom tilknyttet det hentet elementet som“ingen”.
  • Dette vil resultere skjule “”Element etter 5 sekunder fra dokumentobjektmodellen (DOM).

Produksjon

Som observert i output ovenfor, inkluderte den inkluderte "”Element skjuler etter“5”Sekunder.

Tilnærming 2: Skjul et element etter noen sekunder i JavaScript ved bruk av Settimeout () -metode med synlighetseiendommen

“synlighet”Eiendom setter synligheten til et element. Denne egenskapen kan brukes kombinert med "setTimeout ()”Metode for å skjule det hentet elementet etter den angitte tiden.

Syntaks

Gjenstand.stil.synlighet = 'skjult'

I denne syntaksen:

  • Synligheten til den spesifiserte “Gjenstand”Er tildelt som“skjult”.

Eksempel

La oss gå gjennom det under-uttalte eksemplet:













IdNavnAlder
1David18


Utfør følgende trinn, som gitt i kodelinjene ovenfor: