Skjul element når du klikkes utenfor ved hjelp av JavaScript

Når du designer en webside eller nettsted, kan det være et krav å gjøre et element til stede i DOM hele tiden, men på en ikke-synlig måte. For eksempel å fylle noen bestemte felt, som blir aktivert når du klikker utenfor. I slike tilfeller er det veldig nyttig å skjule elementer når det klikkes utenfor med JavaScript.

Denne oppskrivningen vil guide om skjulelementer når du klikker utenfor i JavaScript.

Hvordan skjule et element når du klikkes ute i JavaScript?

For å skjule et element når det klikkes ute i JavaScript, kan følgende tilnærminger brukes:

• “AddEventListener ()”Metode med“vise”Eiendom.
• “ved trykk”Arrangement og“vise”Eiendom.
• “AddEventListener ()”Og“Legg til()”Metoder.
• “jQuery ()”Metoder.

La oss se på hver av de nevnte tilnærmingene en etter en!

Tilnærming 1: Skjul element når du klikkes ute i JavaScript ved hjelp av AddEventListener () -metoden med Display Property

“AddEventListener ()”Metode knytter en hendelse til det spesifiserte elementet, mens“vise”Eiendom returnerer visningstypen til et element. Disse tilnærmingene kan implementeres for å knytte en hendelse med et element slik at det tilsvarende elementet skjuler seg på hendelsen trigger.

Syntaks

I den gitte syntaks:

• “begivenhet”Peker på den spesifiserte hendelsen.
• “lytter”Er funksjonen som vil bli omdirigert til.
• “bruk”Er den valgfrie parameteren.

Eksempel

La oss oversikt Følgende eksempel for det forklarte konseptet:

Klikk utenfor bildet for å skjule det!

I ovennevnte kodebit:

• Inkluderer en "bilde”Element med det spesifiserte”id”.
• I JavaScript -koden, legg ved en hendelse til funksjonen som heter “Clickoutside ()" bruker "AddEventListener ()”Metode.
• I neste trinn får du tilgang til det inkluderte elementet av dets “id" bruker "getElementById ()”Metode.
• Til slutt, se funksjonens parameter “begivenhet”Og bruk tilstanden. Tilstanden vil være slik at hvis klikket utløses utenfor elementet, "vise”Eiendom skjuler elementet.

Produksjon

Fra output ovenfor kan det observeres at det medfølgende bildet skjuler seg ved å klikke utenfor det.

Tilnærming 2: Skjul element når du klikkes utenfor i JavaScript ved å bruke OnClick -arrangement og visningseiendom

En "ved trykk”-Hendelsen påkaller en funksjon etter et klikk, og“vise”Eiendom returnerer på samme måte visningstypen til et element. Disse tilnærmingene kan kombineres for å skjule avsnittet ved å klikke utenfor det ved hjelp av en funksjon.

Eksempel

La oss gå gjennom følgende eksempel:

Klikk utenfor avsnittet for å skjule det!

JavaScript er et veldig effektivt programmeringsspråk. Det er veldig nyttig i å designe en webside eller et nettsted. Det kan også integreres med HTML for å implementere noen ekstra funksjoner også.

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

• Inkluder den angitte overskriften. Inneholder også elementet, jeg.e., avsnitt med den spesifiserte “id”Og justerte dimensjoner.
• I JavaScript -koden, bruk "på Last”Hendelse slik at den definerte funksjonen påberopes på det lastede vinduet.
• I funksjonsdefinisjonen får du også tilgang til avsnittet ved å bruke "getElementById ()”Metode.
• Neste, fest en “ved trykk”Hendelse slik at den tilknyttede funksjonen kjøres etter klikk.
• I funksjonsdefinisjonen, på samme måte, bruk tilstanden ved hjelp av det hentet elementets “id”Slik at hvis klikket utløses utenfor avsnittet, er elementet, aka“avsnitt”, Hides.

Produksjon

Fra output ovenfor er det tydelig at avsnittet skjuler seg ved å klikke utenfor den.

Tilnærming 3: Skjul element når du klikkes ute i JavaScript ved hjelp av AddEventListener () og Add () -metode

“AddEventListener ()”Metode, som diskutert, legger ved en hendelse til det spesifiserte elementet og“Legg til()”Metode legger til ett eller flere enn ett symbol på listen. Disse metodene kan implementeres for å koble til en hendelse til funksjonen og legge CSS -stylingen til den.

Syntaks

I den gitte syntaks:

• “begivenhet”Tilsvarer den spesifiserte hendelsen.
• “lytter”Er funksjonen som vil bli omdirigert til.
• “bruk”Er den valgfrie parameteren.

Eksempel

La oss følge det under-uttalte eksemplet:

Klikk utenfor bildet for å skjule det!

I ovennevnte kodebit:

• På samme måte, inkluder den angitte overskriften.
• Inneholder også det uttalte bildet innenfor "div”Element som har det spesifiserte”klasse”.
• I JavaScript -koden får du tilgang til “div”Element av dets“klasse" bruker "QuerySelector ()”Metode.
• I neste trinn, på samme måte, koble en hendelse til funksjonen ved å bruke "AddEventListener ()”Metode.
• Bruk også tilstanden slik at hvis den vedlagte hendelsen utløser, "Klasseliste”Eiendom sammen med metoden”Legg til()”Påkaller CSS -styling, og skjuler dermed bildet når du klikker utenfor det.

I CSS, utfør stylingen for å skjule elementet på den utløste hendelsen:

Produksjon

Synligheten til bildet kan observeres når du klikker på det og når du klikker utenfor.

Tilnærming 4: Skjul element når du klikkes utenfor i JavaScript ved hjelp av jQuery () -metoder

JQuery -metodene kan brukes til å hente et element direkte og skjule det ved å klikke utenfor det.

Eksempel

Følgende eksempel forklarer det uttalte konseptet:

Dette er Linuxhint -nettstedet

Utfør følgende trinn:

• For det første, legg til "jQuery”Bibliotek for å bruke metodene.
• Inkluder også den oppgitte overskriften med den spesifiserte “id”.
• I JavaScript -koden, tilknyttet “Klikk ()”Metode med funksjonen. Innenfor funksjonen får du tilgang til den medfølgende overskriften og bruk "gjemme seg()”Metode for å skjule den.
• Husk den samme tilnærmingen som forrige trinn for å få tilgang til overskriften.
• Her, bruk "stopPropagation ()”Metode, som vil resultere i å oppnå ønsket funksjonalitet på klikket.

Produksjon

Det handlet om å skjule elementer når du klikket utenfor i JavaScript.

Konklusjon

“AddEventListener ()”Metode med“vise”Eiendom, en“ved trykk”Arrangement og“vise”Eiendom,“AddEventListener ()”Og“Legg til()”Metoder eller“jQuery ()”Metoder kan brukes til å skjule et element når du klikker utenfor ved hjelp av JavaScript. Denne bloggen guidet om prosedyren for å skjule elementer når den klikkes ute i JavaScript.