Sådan ændrer du DOM-ejendomsværdier

Indlæg af Hanne Mølgaard Plasc

 

1.

Tilføj følgende kode til dokumentets kropsdel:

u0026 lt; h1 id = 'myHeading' style = 'position: absolute' u0026 gt; Dette er en overskrift u0026 lt; / h1 u0026 lt; br / u0026 gt; u0026 lt; br / u0026 gt;
u0026 lt; input id = 'move' type = 'knap' værdi = 'flyt' onclick = 'return move ()' / u0026 gt; u0026 lt; br / u0026 gt;
u0026 input id = 'modificere' type = 'knap' værdi = 'modificere' onclick = 'return modify ()' / u0026 gt;

Dette kode opretter en overskrift og to knapper med navnet 'Flyt' og 'Rediger'. Disse tre elementer er DOM elementer. I dette eksempel har overskriften 's' position 'egenskaben en værdi på' absolut '. Det betyder at du kan flytte overskriften senere ved at bruge JavaScript.

2.

Tilføj følgende JavaScript funktioner til hoveddelen af ​​dokumentet:

funktionsbevægelse () {
var myObject = document.getElementById ('myHeading');
myObject.style.left = ' 300px ';
}

funktion modificere () {
var myObject = document.getElementById (' myHeading ');
myObject.style.color =' rød ' ;
}

Disse funktioner ændrer overskriften 's DOM-egenskabsværdier, når du klikker på knapperne. Kommandoen 'document.getElementByID' henter overskriftselementet og ændrer dets stilegenskaber. Du kan bruge denne type logik til at ændre stilegenskaben til ethvert element på enhver webside. I dette eksempel vil placeringselementets position og skriftegenskaber ændre sig, når du klikker på knapperne.

3.

Åbn siden i en browser og klik på knapperne. Når du klikker på knappen 'Flyt', flyttes overskriften til højre. Når du klikker på knappen 'Rediger', ændres overskriften til farve og dens skriftstørrelse vil stige.

Tips og advarsler

  • Undersøg online-øvelser for at lære mere om DOM og kommandoen 'document.GetElementByID'. Denne kommando er afgørende for DOM manipulation. Det giver dig mulighed for at hente ethvert element på en webside og ændre dens egenværdier. Du kan også animere websideobjekter ved at ændre deres DOM-egenskabsværdier. For eksempel kan du ved at ændre et billede s 'venstre' og 'øverste' værdier ved tidsintervaller du kan flytte billedet på tværs af siden.
  • Dokumentobjektmodellen (DOM) er gengivelsen af ​​de objekter, der udgør en webside. Webudviklere ændrer ejendomsværdierne for disse DOM-objekter for at skabe en stor del af funktionaliteten, som du ser på internettet. Du kan f.eks. Manipulere DOM'en til at ændre et afsnits størrelse, farve, skrifttype og placering på en side. Når du først lærer at ændre DOM-egenskabsværdier, kan du gøre din hjemmeside lettere at bruge og mere sjov at navigere. DOM-elementer ved hjælp af HTML; du ændrer deres egenskabsværdier ved hjælp af JavaScript.