Potreste aver visto componenti aggiuntivi del browser "Leggibilità" ripulire le pagine Web con un clic di un pulsante. Queste estensioni consentono ai visitatori di sito Web di rimuovere elementi non essenziali dalla pagina. Intestazioni, immagini, sfondi e persino pubblicità può essere essenziale, ma gli utenti non è necessario vederli per raccogliere le informazioni che vogliono dal tuo sito Web. Se si desidera creare il proprio pulsante di "Leggibilità", è possibile utilizzare JavaScript per dare agli utenti la possibilità di nascondere le intestazioni e sfondi.

Istruzioni

1

Creare un nuovo documento HTML utilizzando blocco note o un Editor HTML.

2

Aggiungere il seguente codice alla sezione "corpo" del documento:

< h1 > titolo 1 < / h1 >

paragrafo 1 < p > </p >

< h2 > titolo 2 < / h2 >

< id di input = "Button1" type = "button" value = "Nascondi" onclick="hide('hidden')" / >

<< id di input = "Button2" type = "button" value = "Show" onclick="hide('visible')" / >

Questo codice crea due intestazioni, un paragrafo e due pulsanti. Il primo pulsante chiama il "Nascondi" funzione JavaScript e passa la parola "nascosta" a tale funzione. Il secondo pulsante chiama la stessa funzione e passa la parola "visibile".

3

Aggiungere il seguente codice alla sezione "head" del documento:

< style type = "text/css" >

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

< / stile >

Questo selettore CSS Imposta immagine di sfondo della pagina. Sostituire "xyz.gif" con il nome di un'immagine sul disco rigido o l'URL di un'immagine sul Web.

4

Incollare il codice riportato di seguito nella sezione "script" del documento:

var currentBackground = "xyz.gif";

Function hide(visibility) () {

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

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

headers1 [i].style.visibility = visibilità;

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

headers2 [i].style.visibility = visibilità;

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

headers3 [i].style.visibility = visibilità;

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

headers4 [i].style.visibility = visibilità;

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

headers5 [i].style.visibility = visibilità;

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

headers6 [i].style.visibility = visibilità;

Se (visibilità = = "nascosto")

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

altro

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

}

Sostituire "xyz.gif" con il nome dell'immagine che è utilizzata nel passaggio precedente. I sei "per" dichiarazioni afferrare tutte le intestazioni dalla pagina Web e impostare la visibilità agli "visibile" o "nascosto" a seconda di quale pulsante l'utente fa clic. L'istruzione finale nasconde l'immagine di sfondo, se il valore di visibilità è "nascosto".

5

Salvare il documento, quindi aprire e visualizzarla in un browser. Le intestazioni, paragrafo, sfondo e pulsanti visualizzano nella pagina. Fare clic sul pulsante "Nascondi"..--scompaiono le intestazioni e sfondo.

Consigli & Avvertenze

• Si potrebbe voler dare agli utenti la possibilità di ripristinare le intestazioni e gli sfondi, poiché le intestazioni possono contenere informazioni utili. Per farlo, è necessario includere il pulsante "Visualizza" come codificato nell'esempio. Per vedere come funziona, fare clic sul pulsante "Visualizza" dopo aver cliccato sul pulsante "Nascondi". Le intestazioni e sfondo riapparire.