Sjekk om en IMG SRC er tom ved hjelp av JavaScript

Mens du designer en attraktiv webside eller nettsted, kan visse bilder og effekter brukes for å få et nettsted til å skille seg ut. I et slikt tilfelle blir prosessen med å sjekke om bildene er inkludert på en webside eller ikke manuelt utfordrende og tidkrevende. Du kan imidlertid bruke JavaScript i en slik situasjon for å følge med de gitte kravene og spare tid effektivt.

Denne artikkelen vil demonstrere tilnærmingene for å sjekke om en IMG SRC er tom i JavaScript

Hvordan sjekke om en IMG SRC er tom ved hjelp av JavaScript?

For å sjekke om en IMG SRC er tom ved hjelp av JavaScript, er følgende tilnærminger i kombinasjon med "getAttribute ()”Metode kan brukes:

• “logisk operatør (!)”.
• “null" data-type.

La oss diskutere hver av tilnærmingene en etter en!

Tilnærming 1: Sjekk om en IMG SRC er tom i JavaScript ved hjelp av logisk operatør (!)

“getAttribute ()”Metode gir verdien av et elements attributt. Mens de "logiske" operatørene brukes til å analysere logikken mellom variablene eller verdiene. Mer spesifikt, den “logiske ikke (!) ”Operatør kan brukes til å sjekke om en bestemt attributt er inkludert eller tom i et element.

Syntaks

element.getAttribute (navn)

I den gitte syntaks:

• “Navn”Henviser til attributtets navn.

Eksempel 1: Sjekk for en enkelt SRC -attributt i et bilde
I dette eksemplet, en spesifikk attributt, jeg.e., SRC, vil bli sjekket for det oppgitte kravet:

I kodelinjene ovenfor:

• For det første, spesifiser "”Element som har det angitt”id”.
• I JS -koden får du tilgang til det spesifiserte bildeelementet med dets “id" bruker "getElementById ()”Metode.
• I neste trinn, bruk "getAttribute ()”Metode som spesifiserer attributtet”src”Som parameter, som vil bli sjekket for det oppgitte kravet.
• Etter det, bruk "If-Else"Tilstand slik at den tidligere uttalelsen som er spesifisert i"hvis”Tilstand vises på“src”Attributt er tomt i det hentet bildet.
• I det andre scenariet, "ellers”Tilstand vil bli utført.

Produksjon

I ovennevnte utgang kan det observeres at "src”Attributt på bildet er tomt.

Eksempel 2: Sjekk for flere SRC -attributter i bildene
I dette eksemplet har to bilder som har tomme og ikke-tomme “src”Attributter vil bli sjekket:

Bruk følgende trinn i ovennevnte kodebit:

• For det første, spesifiser "”Element som har det angitt”id”Som attributt.
• På samme måte, inkluder en annen "”Element som har“src”Og“idHenholdsvis attributter.
• I JavaScript -koden inkluderte tilgang begge bilder av deres "ids”I“getElementById ()”Metode.
• Etter det, bruk "getAttribute ()”Metode på hvert av de hentet bildene for å lokalisere“src" Egenskap.
• Nå, bruk tilstanden for å sjekke at hvis "src”Attributt er ikke inneholdt i begge bilder, den tidligere uttalelsen vises ved hjelp av“&&”Operatør.
• I det andre scenariet, "ellers”Tilstand utføres.

Produksjon

Det kan sees at “src”Attributt i begge bildene er ikke tomt som spesifisert av meldingen på konsollen.

Tilnærming 2: Sjekk om en SRC i en IMG er tom i JavaScript ved hjelp av NULL -datatype.

“null”Datatype betegner en nullverdi. Denne datatypen kan brukes i kombinasjon med "getAttribute ()”Metode og“Likhet (==)”Operatør for å se etter det oppgitte kravet ved å tildele verdien null til“src”Attributt og verifisere det.

Eksempel
Følgende eksempel illustrerer det uttalte konseptet:

Implementer nå følgende trinn i ovennevnte kodebit:

• Husk de diskuterte tilnærmingene for å inkludere “”Element og hente det via“getElementById ()”Metode.
• Etter det får du også tilgang til "src”Attributt fra det hentede bildet ved å bruke“getAttribute ()”Metode.
• I neste trinn, sjekk om SRC -attributtet på bildet er tomt ved hjelp av "null”Verdi.
• I tilfelle, hvis den ekstra tilstanden er oppfylt, er koden lagt til i "hvis”Blokk vil bli utført. I det andre scenariet, på samme måte, "ellers”Tilstanden trer i kraft.

Produksjon

Ovennevnte utgang betyr at det uttalte kravet er oppfylt.

Konklusjon

“getAttribute ()”Metode i kombinasjon med“logisk”Operatør (!) eller "null”Datatype kan brukes til å sjekke om en IMG SRC er tom i JavaScript. Den tidligere tilnærmingen kan implementeres for å se etter "src”Attributt direkte på enkelt- og flere bilder. Den sistnevnte tilnærmingen kan brukes for å utføre ønsket krav ved å tilordne et "null”Verdi til den hentet attributtet og bekrefte den. Denne bloggen forklarer hvordan du kan sjekke om en SRC i en IMG er tom ved hjelp av JavaScript.