Slik skjuler en DIV HTML i Javascript

Av ulike årsaker kan det være lurt å skjule et HTML-element som inneholder tekst eller annet innhold, for eksempel en "div" tag, etter en webside lastes. Du kan gjøre dette med Javascript for å endre stilen på element, ved hjelp av "getElementById" aspektet av Document Object Model. Javascript-funksjonen kan kalles som enhver annen kommando; i denne opplæringen, vil det være forbundet med en knapp som, når den klikkes, skjuler koden fra visningen.

Bruksanvisning

1 Bruk en ren tekst editor for å åpne HTML-fil som inneholder "div" tag som du ønsker å skjule. Finn den spesifikke elementet i dokumentet.

2 Legg denne koden umiddelbart etter "div" en del av åpningen tag: "id =" skjulte "". Brikken skal nå se slik ut: "<div id =" skjulte ">". Hvis det er andre attributter knyttet til div, legger id-attributtet først; for eksempel, kan det se ut som "<div id =" skjulte "class = 'body_copy_text' style = 'color: # 000;"> ".

3 Bla til slutten av div (merket med "</ div>"), og trykk på Enter-tasten for å lage en ny linje. På den, skriver du inn følgende kode: "<div onclick =" document.getElementById ( 'hidden') style.display = "none". "> Hide Div </ div>".

4 Lagre HTML-fil og avslutte tekst editor.

5 Last HTML-filen i nettleseren din, og se etter tekstblokk som sier "Hide Div. Klikk på den for å skjule div du merket med "id =" skjulte "" attributt.

Hint

• Hvis du vil at div skal skjules automatisk når siden lastes, er det lettere å bruke CSS enn å bruke Javascript. Inne i "<div>" tag, legg til følgende linje mellom "<div" og ">": "style =" display: none; ' ". Dette vil også skjule innhold for de seerne som ikke har aktivert Javascript.