Hvordan skjul av klasse i Javascript

Javascript er et programmeringsspråk som brukes til tillatte nettsteder for å samhandle med brukeren. Den lar sider for å vise pop-ups, asynkront sende forespørsler til serveren og lage rullegardinmenyer, for å nevne noen eksempler. Til tross for Javascript funksjoner for å finne elementer ved ID og navn, betyr det ikke har en funksjon for å finne elementer etter klasse. Du kan imidlertid skjule elementer etter klasse ved looping enn alle elementer, sjekke hvis deres klasse matcher søkte-for klassen og i så fall skjuler elementet.

Bruksanvisning

1 Opprett en ny fil og lagre den med et ".html" filtypen. Åpne filen med et tekstredigeringsprogram, for eksempel Notisblokk.

2 Skriv en del av HTML-kode som skaper en knapp med en "onClick" egenskap av "hide ()." Dette vil kalle Javascript-funksjonen "skjule" når knappen klikkes. Her er koden:

<-knappen OnClick = "hide ()"> Skjul </ knapp>

3 Skriv en del av HTML-kode som skaper en rekke HTML-elementer med klassen "hideable." Disse elementene vil være skjult når knappen fra forrige trinn klikkes. Her er et eksempel:

<Div class = "hideable"> Dette er en hideable div </ div>

<Span class = "hideable"> Dette er en hideable span </ span>

4 I begynnelsen av filen, skriver åpnings- og avslutnings HTML "script" tags. Disse forteller leseren at koden inni dem er Javascript. Her er koden:

<Script>

</ Script>

5 Mellom "script" tags, skrive en Javascript-funksjonen skjuler alle HTML-elementer med klassen "hideable." Først må det få alle elementene i en matrise ved å kalle "document.getElementsByTagName" -funksjonen med parameteren "*" og lagre resultatet i en ny variabel. For det andre må den løkke over hver element i gruppen ved hjelp av en "for" sløyfe. For det tredje må det sjekke om den aktuelle varen har klassen "hideable" bruke "getAttribute" -metoden, og i så fall, skjule elementet ved å sette elementer "style.display" egenskapen til "ingen". Her er koden:

funksjon hide () {

Var elementer = document.getElementsByTagName ( "*");

for (i = 0; i <elements.length; i ++) {

if (elementer [i] .getAttribute ( "klasse") == "hideable") {

elementer [i] .style.display = "ingen";

}}}