Come aggiungere stili con JavaScript

August 28

Poiché JavaScript è un linguaggio di scripting lato client, che permette di accedere e manipolare il codice HTML in una pagina Web dopo che è caricato nel browser e visualizzata sullo schermo. Ad esempio, è possibile aggiungere stili di elementi HTML contrassegnando un elemento con un "id", fa riferimento l'elemento e aggiungendo lo stile. È possibile includere direttamente lo stile o definire una classe e aggiungere la classe per aggiungere lo stile.

istruzione

1 Creare una pagina HTML utilizzando un editor o Notepad. Definire una classe con uno stile da aggiungere e aggiungere testo alla pagina Web che si desidera per lo stile utilizzando JavaScript. Ad esempio, digitare:

<! DOCTYPE HTML PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<Html xmlns = "http://www.w3.org/1999/xhtml">

<Head>

<Meta http-equiv = "Content-Type" content = "text / html; charset = utf-8" />

<Title> aggiungere stili </ title>

<Style>

EVIDENZA {background-color: #FFFFCC; }

</ Style>

</ Head>

<Body>

<Div id = "text1"> evidenziare questo testo </ div>

<Div id = "testo2"> Evidenziare questo testo troppo </ div>

</ Body>

</ Html>

2 Creare una funzione JavaScript e posizionarlo tra i tag <head> tag. Prendi il "id" del primo testo di stile e aggiungere i parametri stilistici direttamente ad esso. Ad esempio, digitare:

<Script type = "text / javascript">

Funzione style1 () {

var text1 = document.getElementById("text1");

text1.style.backgrouondColor = "#FFFFCC";

}

3 Creare un'altra funzione JavaScript per ottenere il "id" del secondo elemento e aggiungere una classe CSS per modificare lo stile. Ad esempio, digitare:

Funzione style2 () {

var text2 = document.getElementById("text2");

text2.class = "highlight";

}

</ Script>

4 Chiamare le due funzioni JavaScript destra prima del tag di chiusura <body> per dare il tempo pagina HTML da caricare. Ad esempio, digitare:

<Script type = "text / javascript">

style1 ();

style2 ();

</ Script>


Articoli Correlati