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";
}}}