Hvordan få et attributt i Javascript

Hvordan få et attributt i Javascript


Javascript gir nettstedet utvikler med midler for å vise og endre de strukturelle elementene i en webside. Javascript har innebygde funksjoner som kan få tilgang til HTML (Hypertext Markup Language) Document Object Model, eller DOM, og utsetter styling attributtene for en bestemt HTML tag.The Javascript-metoden - getElementById () - kan kikke inn en HTML-kode som er merket med en ID og avsløre attributter, for eksempel dens bakgrunn, skrifttype, grenser, bredde, marginer og posisjonering.

Bruksanvisning

1 Start standard, ren tekst tekst editor program som er tilgjengelig på datamaskinen.

2 Skriv inn følgende kode inn i teksteditor.

<Html>

<Head>

<Script language = "javascript">

fungere spørre () {

Var infomytag1 = document.getElementById ( "mytag1");

Var infomytag2 = document.getElementById ( "mytag2");

document.write ( "<h2> Tag attributter for første div </ h2>");

document.write ( "Font farge er:" + infomytag1.style.color);

document.write ( "");

document.write ( "Avsnitt bredde er:" + infomytag1.style.width);

document.write ( "");

document.write ( "Skrift størrelse er:" + infomytag1.style.fontSize);

document.write ( "");

document.write ( "bakgrunnsfarge er:" + infomytag1.style.backgroundColor);

document.write ( "");

document.write ( "margin-bottom er:" + infomytag1.style.marginBottom);

document.write ( "<h2> Tag attributter for andre div </ h2>");

document.write ( "Font farge er:" + infomytag2.style.color);

document.write ( "");

document.write ( "Skrift familien er:" + infomytag2.style.fontFamily);

document.write ( "");

document.write ( "Skrift størrelse er:" + infomytag2.style.fontSize);

document.write ( "");

document.write ( "Font vekt er:" + infomytag2.style.fontWeight);

document.write ( "");

document.write ( "margin-bottom er:" + infomytag2.style.marginBottom);

}

</ Script>

</ Head>

<Body>

<Div id = "mytag1" style = "color: red; width: 10em; background-color: gul; font-size: 16px; margin-bottom: 2em"> Her er mytag1 </ div>

<Div id = "mytag2" style = "color: blue; font-family: arial; font-size: 8px; font-weight: bold; margin-bottom: 30px"> En annen Div merket "mytag2" </ div>

<INPUT TYPE = "button" onclick = "Spørre ()" value = "Klikk her for å vise kodeattributter">

</ Body>

</ Html>

3 Klikk på Fil-menyen. Velg "Lagre" alternativet. Lagre under filnavnet "test.html."

4 Start nettleseren som er tilgjengelig på datamaskinen. Klikk på "File" menyen og velg "Åpne fil".

5 Finn filen "test.html" nettopp opprettet, velger du den med musen og klikk på "Open".

6 Klikk på knappen med musen for å se de "div" tag attributter.

Hint

  • Javascript er et case-sensitive språk. For eksempel funksjonene "showAllTags ()" og "ShowAllTags ()" anses å være to forskjellige funksjoner ved Javascript tolk den. Variablene er store og små bokstaver i tillegg. Men HTML er ikke store og små bokstaver. Hvis du ønsker å ringe Javascript-funksjon "showAllTags ()" med et museklikk, kan koden skrives som: onclick () = "showAllTags ()" eller onclick () = "showAllTags ()".
  • Den store nettleseren vil vise gyldig HTML og CSS-kode annerledes. Selv forskjellige versjoner av den samme nettleseren kan gi uventede visningsproblemer. Test alltid koden på ulike nettlesere og eldre versjoner av den samme nettleseren for å sikre at koden fungerer som forventet.