Come modificare un attributo di classe CSS con JavaScript

January 21

Come modificare un attributo di classe CSS con JavaScript


Cambiare l'attributo di classe di un elemento HTML utilizzando JavaScript permette agli sviluppatori di creare effetti interattivi all'interno di siti web. Utilizzando una funzione JavaScript, è possibile determinare quale comportamento dovrebbe avvenire quando gli utenti interagiscono con gli elementi delle pagine, alterando le proprietà di stile CSS in risposta a questa interazione. Alterare nomi degli attributi di classe è una delle tecniche chiave coinvolte in questo compito, che è realizzabile anche per le persone appena agli inizi dello sviluppo Web.

istruzione

1 Crea la tua pagina HTML con gli elementi per visualizzare il contenuto. Aprire un nuovo file in un editor di testo e salvarlo con ".html" come l'estensione, inserendo il seguente codice:

<Html>

<Head>

</ Head>

<Body>

<Div class = "off"> Ciao </ div>

</ Body>

</ Html>

Questo crea semplicemente una pagina Web con un unico elemento HTML in esso. L'elemento è stato assegnato un attributo class con il nome di "off". Questo indica lo stato dell'elemento quando l'utente non ha la sua cursore del mouse su di esso.

2 Crea il tuo codice CSS. Aprire un nuovo file in un editor di testo e salvarlo come "interactivestyle.css" per riflettere lo scopo del compito in corso. Inserire il seguente codice:

.OFF {

color: # FF0000;}

.al di sopra {

color: # 0000FF;}

Aggiungere un link al tuo file CSS nella sezione head della pagina HTML, tra i tag di apertura e chiusura della testa:

<Link rel = "stylesheet" type = "text / css" href = "interactivestyle.css" />

3 Creare due funzioni JavaScript nella sezione head della pagina, prima o dopo il collegamento al vostro file CSS:

<Script type = "text / javascript">

Funzione overElement (elemRef) {

// Mouse è sopra l'elemento

}

Funzione offElement (elemRef) {

// Mouse è fuori l'elemento

}

</ Script>

La pagina sta andando a modificare lo stile dell'elemento quando l'utente sposta il mouse su e fuori di esso. Una funzione separata è necessario per elaborare ciascuno di questi eventi utente.

4 Individuare gli elementi all'interno le funzioni JavaScript e cambiare i loro attributi nome della classe. Modificare le due funzioni JavaScript come segue:

Funzione overElement (elemRef) {

// Mouse è sopra l'elemento

document.getElementById (elemRef) .className = "over";

}

Funzione offElement (elemRef) {

// Mouse è fuori l'elemento

document.getElementById (elemRef) .className = "off";

}

Questo codice in ogni funzione prima individua l'elemento in questione usando l'attributo ID che è stato passato come parametro, allora altera il nome della classe di conseguenza.

5 Chiamare le funzioni all'interno del tuo contenuto HTML. La pagina deve "ascoltare" per interazione con l'utente, chiamando le funzioni JavaScript quando ciò si verifica. Modificare il vostro elemento HTML come segue:

<Div class = "off" id = "intelem" onmouseover = "overElement (this.id)" onmouseout = "offElement (this.id)"> Ciao </ div>

Ciò assegna un attributo ID all'elemento, passando per ogni funzione quando l'utente sposta il suo mouse o disattivare l'area. Salvare i file e aprire la pagina HTML in un browser Web, spostando il mouse e disattivare l'elemento per verificare la funzionalità.

Consigli e avvertenze

  • È possibile includere tutte le proprietà CSS che ti piace per quando l'utente sposta suo mouse e disattivare gli elementi.
  • funzioni JavaScript a volte si comportano in modo imprevedibile in alcuni browser, quindi il test è di vitale importanza.