Come modificare le proprietà CSS con JavaScript

August 6

Come modificare le proprietà CSS con JavaScript


Cascading Style Sheets (CSS) crea il layout ei colori visibili in una pagina Web. Javascript è un software client-side utilizzato per programmare il contenuto dinamico nella pagina. Javascript può essere usato per modificare le proprietà CSS sui vostri controlli della pagina Web. JavaScript può cambiare colori, immagini, stili e testo nelle proprietà CSS. Questo ti dà la possibilità di cambiare la pagina Web da interazione con l'utente.

istruzione

1 Aprire il file HTML in un editor di testo. Questo può essere un semplice, applicazione gratuita ad esempio Blocco note. Dopo aver aperto il file, scorrere verso il basso per l'elemento che si desidera modificare. In questo esempio, un pulsante modulo viene modificato.

2 All'interno del tag form pulsante, inserire il seguente codice:
onClick = "javascript: changeVisibility (questo);"
L'evento "onClick" modifica la proprietà CSS quando l'utente fa clic sul pulsante. "ChangeVisibility" è una funzione di creare per modificare la proprietà di visibilità. Infine, il "questo" notazione invia l'oggetto pulsante per la funzione, in modo che sappia quale pulsante per cambiare sulla pagina.

3 Scorrere fino alla parte superiore della pagina HTML per creare la funzione Javascript. All'interno del "<head>" e "</ head>" tag, inserire le seguenti voci tag JavaScript:
<Script type = "text / javascript"> </ script>
Ciò denota un blocco di codice Javascript, in modo che il file HTML ha le istruzioni per eseguire i comandi invece di tradurli in HTML.

4 Utilizzare il codice seguente per modificare la proprietà CSS sul vostro elemento HTML:
Funzione changeVisibility (pulsante)
{
button.style.visibility = "hidden"
}
In questo codice di esempio, il pulsante viene passato alla funzione. Poi, proprietà di stile CSS del pulsante "visibilità" viene modificato in nascosto. Questo nasconde il pulsante da parte dell'utente, in modo che non sia visibile sulla tua pagina web.