Slik skjuler topper og bakgrunner

Du har kanskje sett "lesbarhet" nettlesertillegg som rydde opp websider ved å klikke på en knapp. Disse utvidelsene tillate nettsted besøkende for å fjerne ikke-essensielle elementer fra siden. Overskrifter, bilder, bakgrunner og til og med annonser kan være avgjørende, men brukerne ikke trenger å se dem for å samle den informasjonen de ønsker fra ditt nettsted. Hvis du ønsker å lage din egen "lesbarhet" -knappen, bruker Javascript for å gi brukerne muligheten til å skjule overskrifter og bakgrunner.

Bruksanvisning

1 Opprett en ny HTML-dokument med Notepad eller en HTML Editor.

2 Legg til følgende kode i "kroppen" delen av dokumentet:

<H1> Overskrift 1 </ h1>

<P> PARAGRAPH1 </ p>

<H2> Overskrift 2 </ h2>

<Input id = "Button1" type = "button" value = "Hide" onclick = "hide ( 'hidden')" />

<< Innspill id = "Button2" type = "button" value = "Show" onclick = "hide ( 'synlig')" />

Denne koden skaper to hoder, et avsnitt og to knapper. Den første knappen kaller "skjule" Javascript-funksjonen og passerer ordet "skjult" til denne funksjonen. Den andre knappen kaller den samme funksjon og passerer ordet "synlig".

3 Legg til følgende kode i dokumentet "head" -seksjonen:

<Style type = "text / css">

body {background-image: URL ( 'xyz.gif');}

</ Style>

Dette CSS velgeren setter sidens bakgrunnsbilde. Erstatt "xyz.gif" med navnet på et bilde på harddisken eller nettadressen til et bilde på nettet.

4 Lim inn følgende kode i dokumentet "script" -delen:

Var currentBackground = "xyz.gif";

funksjon skjule (synlighet) {

Var headers1 = document.getElementsByTagName ( "H1");

Var headers2 = document.getElementsByTagName ( "H2");

Var headers3 = document.getElementsByTagName ( "H3");

Var headers4 = document.getElementsByTagName ( "H4");

Var headers5 = document.getElementsByTagName ( "H5");

Var headers6 = document.getElementsByTagName ( "H6");

for (var i = 0; i <headers1.length; i ++)

headers1 [i] .style.visibility = synlighet;

for (var i = 0; i <headers2.length; i ++)

headers2 [i] .style.visibility = synlighet;

for (var i = 0; i <headers3.length; i ++)

headers3 [i] .style.visibility = synlighet;

for (var i = 0; i <headers4.length; i ++)

headers4 [i] .style.visibility = synlighet;

for (var i = 0; i <headers5.length; i ++)

headers5 [i] .style.visibility = synlighet;

for (var i = 0; i <headers6.length; i ++)

headers6 [i] .style.visibility = synlighet;

if (synlighet == "skjult")

document.getElementsByTagName ( 'body') [0] .style.backgroundImage = "URL ()";

ellers

document.getElementsByTagName ( 'body') [0] .style.backgroundImage = "URL (" + currentBackground + ")";

}

Erstatt "xyz.gif" med navnet på bildet du brukte i forrige trinn. De seks "for" uttalelser hente alle overskriftene fra websiden og satt sin synlighet til enten "synlig" eller "skjult" avhengig av hvilken knapp brukeren klikker. Den endelige uttalelsen skjuler bakgrunnsbildet hvis verdien av synlighet er "skjult".

5 Lagre dokumentet, og deretter åpne og vise den i en nettleser. Den overskrifter, avsnitt, bakgrunn og knapper vises på siden. Klikk på "Skjul" -knappen - topp- og bakgrunn forsvinner.

Hint

• Du ønsker kanskje å gi brukerne muligheten til å gjenopprette overskrifter og bakgrunner, siden overskriftene kan inneholde nyttig informasjon. For å gjøre det, inkludere "Show" -knappen som er kodet i eksempelet. For å se hvordan det fungerer, klikk på "Show" -knappen etter å ha klikket på "Skjul" knappen. Topp- og bakgrunn dukke opp igjen.