Getting and Setting Attributes

As well as manipulating nodes using DOM programming we can also manipulate attributes of a node.

In this example we retrieve the size of an image and change its height and width attributes.

Changing Attributes

We get the height and width as follows,

   document.getElementById('xyz').getAttribute("width");
   document.getElementById('xyz').getAttribute("height");

Now we manipulate their values inside a loop to 'grow' the image,

    document.getElementById('xyz').setAttribute("width", x+5);
    document.getElementById('xyz').setAttribute("height", y+5);

Build a DOM Bouquet

---

Exercise - Create a similar page that takes the image of a circle and stretches it horizontally only.

---