Hvordan sette CSS Styles med Javascript

April 19

Innstilling CSS-stiler med Javascript er en enkel og effektiv måte å lage en nettside mer dynamisk og stimulerende for besøkende. Du trenger ikke å ha omfattende kunnskap om programmering for å endre CSS med Javascript, som du bare trenger korte, enkle utdrag av kode. Nettsteder bruker Javascript for å sette CSS stil for mange grunner, men hovedsakelig for å skape en interaktiv, visuelt tiltalende erfaring. Side funksjoner som særlig nytte av å bruke Javascript for å sette CSS omfatte de deler av en side som folk er i samspill med for eksempel menyer og kontroller.

Bruksanvisning

1 Opprett web-siden med elementene du ønsker å sette stilegenskaper for. Bruk følgende disposisjon:

<Html>

<Body>

<Div id = 'maindiv' class = 'sometext'> Her er mitt tekstinnhold. </ Div>

</ Body>

</ Html>

Legg innledende stilinnstillingene for innholdet, enten i hodet delen av siden mellom <style> tags, eller i en egen "CSS" fil koblet til i hodet:

.sometext

{Background: # FFFF00;}

2 Endre tekstfarge ved hjelp av Javascript. I hodet delen av siden, legge til kode i henhold til følgende struktur:

fungere overDiv (divId)

{Document.getElementById (divId) .style.color = "# 0000FF";}

fungere offDiv (divId)

{Document.getElementById (divId) .style.color = "# 000000";}

</ Script>

Endre innholdet på siden som følger:

<Div id = 'maindiv' class = 'sometext' onmouseover = "overDiv (this.id);" onmouseout = "offDiv (this.id);"> Her er min tekst innhold </ div>.

Test side, og du skal se at tekstfargen endrer seg når du ruller musen over det.

3 Endre teksten bakgrunnen dynamisk, ved hjelp av "klasse" egenskap av innholdet. Gjør følgende endring til skriptet på siden hodet:

fungere overDiv (divId)

{Document.getElementById (divId) .style.color = "# 0000FF"; document.getElementById (divId) .className = "textalt";}

fungere offDiv (divId)

{Document.getElementById (divId) .style.color = "# 000000"; document.getElementById (divId) .className = "sometext";}

Legg til CSS-kode:

.textalt

{Background: # 00FF00;}

Test side og du skal se at bakgrunnen endrer også farge når du ruller musen over det.

4 Bruk eksterne kodebiblioteker for å forbedre den dynamiske styling. Den viktigste ressursen som utviklere bruker for CSS og Javascript er jQuery. JQuery script lar deg sette mange forskjellige stilegenskaper. Last jQuery (se Ressurser) og inkluderer en link til manuset i hodet på siden, noe som gjør at filnavn og plassering er riktige:

Husk å laste opp jQuery script til serveren sammen med web siden.

5 Bruk jQuery til å lage effekter som falming innen nettsidene. Ta med følgende på siden kroppen:

<Div id = "showclick"> Klikk her for å vise noe annet </ div>

<Div id = "ekstra"> Denne teksten er i utgangspunktet skjult! </ Div>

Legg til Javascript på siden hodet:

$ (Funksjon ()

{$ ( '# Showclick'). Klikk (funksjon () {

$ ( '# Ekstra ") fadeIn (" sakte.'); }); });

Legg til CSS-delen:

ekstra

{Display: none;}

Test siden og klikk på "showclick" delen, bør du vise mer tekst vises sakte.