Come nascondere le intestazioni e Sfondi

April 27

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

istruzione

1 Creare un nuovo documento HTML utilizzando il blocco note o un editor HTML.

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

<H1> Titolo 1 </ h1>

<P> Il paragrafo 1 </ p>

<H2> Titolo 2 </ h2>

<Input id = type = valore "Button1 tasto" "" = "Nascondi" onclick = "nascondere ( 'nascosto')" />

<< Ingresso id = "Button2" type = valore "pulsante" = "Mostra" onclick = "nascondere ( 'visibile')" />

Questo codice crea due intestazioni, un paragrafo e due pulsanti. Il primo pulsante chiama la funzione JavaScript "nascondere" e passa la parola "nascosto" a quella funzione. Il secondo pulsante chiama la stessa funzione e passa la parola "visibile".

3 Aggiungere il seguente codice alla sezione "testa" del documento:

<Style type = "text / css">

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

</ Style>

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 seguente codice nella sezione "script" del documento:

var currentBackground = "xyz.gif";

funzione di nascondere (visibilità) {

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 visibilità;

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

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

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

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

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

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

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

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

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

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

if (visibilità == "nascosto")

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

altro

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

}

Sostituire "xyz.gif" con il nome dell'immagine è stato utilizzato nel passaggio precedente. I sei "per" dichiarazioni afferrare tutte le intestazioni dalla pagina Web e impostare la loro visibilità a uno "visibile" o "nascosto" a seconda del pulsante l'utente fa clic. La dichiarazione finale nasconde l'immagine di sfondo, se il valore di visibilità è "nascosto".

5 Salvare il documento, quindi aprire e visualizzare in un browser. Il appaiono intestazioni, punto, sfondo e pulsanti sulla pagina. Fare clic sul pulsante "Hide" - gli header e lo sfondo scompaiono.

Consigli e avvertenze

  • Si potrebbe voler dare agli utenti la possibilità di ripristinare le intestazioni e sfondi, dal momento che le intestazioni possono contenere informazioni utili. Per fare questo, inserire il pulsante "Show" come codificato nell'esempio. Per vedere come funziona, fare clic sul pulsante "Show" dopo aver fatto clic sul pulsante "Hide". Le intestazioni e lo sfondo riappaiono.