Hvordan vise eller skjule et element på nettstedet ved hjelp av JavaScript

Gjennom hele nettutviklingen trenger brukere å skjule eller vise noen elementer. Disse elementene kan være en knapp, noen animasjon eller en navigasjonslinje osv. Det meste av tiden brukeren vil.

Med JavaScript kan brukere enkelt skjule eller vise et element på websiden, avhengig av atferden til brukeren. I denne artikkelen får vi se hvordan JavaScript brukes til dette formålet.

Skjuler og viser elementer i JavaScript

Ved hjelp av JavaScript kan vi skjule eller vise et element på nettsiden ved å bruke:

• stil.vise
• stil.synlighet

La oss forstå hver av dem separat med eksempler og deretter sammenligne hvordan de skiller seg fra hverandre:

Hvordan bruke stil.Vis i JavaScript: Displayegenskapen representerer et element som skal vises på websiden din ... ved hjelp av denne brukeren kan skjule hele elementet, og siden er bygget ettersom det forrige elementet ikke var der i det hele tatt.

Syntaks:

Her i komma bør en verdi defineres for om du skal vise innholdet eller ikke. Her er et eksempel:

Å skjule elementet: stil.display = “Ingen”:

Klikk på "Skjul meg" -knappen for å skjule DIV -elementet:

Når brukeren klikker på knappen, kalles funksjonen for å skjule elementet. Dette gjøres ved å tilordne ingen verdi til stil.vise.

Se nå på utgangen, hvordan knappen okkuperte plassen på bildet. Slik skjuler det seg, det skjuler elementet helt og gjenoppbygger siden som om elementet ikke var der i utgangspunktet.

Å vise et element: stil.display = “” eller “Block”:

Klikk på "Vis meg" -knappen for å vise element Div -elementet:

Nå på samme måte, for å vise elementet, flyttet knappen og gitt plass til elementet når displayet ble endret fra stil.display = ”ingen” til stil.display = “”.

Gjennom disse måtene vil elementet vises eller helt skjult og ikke bare synligheten. Siden vil bli gjenoppbygd i henhold til denne atferden.

Hvordan bruke stil.Synlighet i JavaScript: Stilsynligheten fungerer på lignende måte, men forskjellen er at bare synligheten til elementet er skjult for skjermleseren. Dette betyr at elementet ikke fjernes fra sidestrømmen, og følger dermed plass for det på siden.

Syntaks:

Her i komma skal en verdi av "skjult" eller "" ingen verdi defineres for om du skal vise innholdet eller ikke. For bedre å forstå dette her er et eksempel:

Dette er et avsnitt.

Dette er et annet avsnitt.

Nå, her da knappen ble klikket på ato skjul synligheten, gjemte den bare den for seerens øye.

I dette var ikke plassen på websiden okkupert av elementet. Dette viser hvordan stil.visning og stil.synlighet forskjellig.

Konklusjon

Alle vil skjule eller vise noen spesielle elementer på websiden sin. I dette hvordan du guider, lærte vi måter å endre synligheten til elementer på websiden ved hjelp av JavaScript. Det er to spesifikke måter, men de skiller seg litt fra hverandre. Ved hjelp av stil.vise Innholdet blir skjult og plassen er okkupert av det andre innholdet. Mens du bruker stil.synlighet, Innholdet er bare skjult for leseren, men det er fremdeles der, da plassen ikke kan okkuperes av andre elementer. Dette er ekstremt nyttig for webutviklere, ettersom utviklere ønsker at noe innhold skal skjules og noen skal vises i henhold til synspunktet.