DIV: Klasse Vs. ID

Webutviklere opprette sider i HTML, velge fra en rekke elementer. HTML-elementer som "div" definere innholdet i websider, som kan inkludere tekst, data og andre medier. En HTML-element har en åpning tag, en avsluttende koden, noe av innholdet, og valgfrie attributter. Disse attributtene vises som en del av startkoden og angi tilleggsinformasjon om elementet, for eksempel dens utpekte klasse eller ID.

HTML Elements

Web-sider kan inneholde "div" elementer for å definere struktur og innhold. Følgende eksempel HTML markup syntaks demonstrerer blant annet en enkel "div" element med litt tekst innhold:

<Div> Her er litt tekst innhold. </ Div>

Denne strukturen kan også omfatte andre elementer nestet i det, som i følgende eksempel kode, hvor "div" inneholder et bilde element sammen med teksten:

<Div> Her er noen tekstinnhold. <Img alt = "bilde" /> </ div>

Attributter

HTML-elementer kan inkludere attributter innenfor sine åpningstider koder. For visse elementer, noen egenskaper som kreves, mens andre er valgfrie og kan bli inkludert i noen element. Klasse og ID kan både gi tilleggsinformasjon for HTML-elementer innen kroppen delen av en side. Utviklere bruker ID attributter for å identifisere elementer unikt innenfor en side. Dette betyr at et ID-attributtverdi bør bare forekomme én gang i løpet av en enkelt side. Følgende eksempel HTML demonstrerer blant annet en ID-attributtet for et element:

<Div id = "header"> Header innhold </ div>

Klasse attributter definere grupper av elementer, slik at den samme klassen attributtverdi kan dukke opp flere ganger i løpet av en side. Følgende eksempel HTML demonstrerer legge en klasse attributt til et element:

<Div class = "main"> Hoved innhold </ div>

CSS

ID og klasse attributter tillate utviklere å definere stil regler for websider ved hjelp av CSS (Cascading Style Sheet) erklæringer. Følgende eksempel CSS-koden demonstrerer styling elementer med en bestemt ID:

header {

color: # FF0000;

}

Følgende eksempelkode demonstrerer bruk av en klasse attributt å style elementer av en bestemt type:

div.main {

width: 200px;

}

CSS-kode kan også søke styling til elementer av enhver type med en bestemt klasse attributt som følger:

.main {

width: 200px;

}

Javascript

Webutviklere kan bruke klassen og ID-attributter for å identifisere spesifikke elementer eller grupper av elementer på en side, ved hjelp av Javascript. Denne teknikken gjør nettsteder for å inkludere visuelle effekter, for eksempel endrer utseendet på sidedeler som brukeren kommuniserer med dem. Følgende eksempelJavaScript-koden demonstrerer anskaffe en referanse til et HTML-element med en bestemt ID attributtverdi:

Var headElem = document.getElementById ( "header");

For å skaffe elementer med en bestemt klasse navn prosessen er noe mer komplisert, som følger:

Var divElems = document.getElementsByTagName ( "div");

Var i;

for (i = 0; i <divElems.length; i ++) {

Var isMain = false;

if (divElems [i] .className == "main") isMain = true;

}

Denne funksjonen kontrollerer gjennom rekke "div" elementer for de med ønsket klassenavnet.