Categories:
Partners
Follow Us
Facebook Fan Page

Accessing HTML attributes using the DOM

Among the many talents of the DOM is its ability to retrieve and modify attributes inside HTML elements. Using just a small set of methods, you can intuitively get the width of a DIV, change the src of an image, or even remove the background image of the document!

The DOM supplies the following 3 methods to tackle HTML attributes:

-getAttribute()
-setAttribute()
-removeAttribute()

These methods can be used on any element that supports attributes.

-getAttribute()

GetAttribute() retrieves the corresponding value of an attribute. If the attribute does not exist, an empty string is returned. For example:

<img id="myimage" src="test.gif">

<script type="text/javascript">
//returns "test.gif"
var getvalue=document.getElementById("myimage").getAttribute("src")
</script>

-setAttribute()

As the name implies, setAttribute() dynamically modifies the value of an element's attribute. The method takes two parameters- the name of the attribute to set, and its new value. Using the same <IMG> example above:

<script type="text/javascript">
//image src is now "another.gif"
document.getElementById("myimage").setAttribute("src","another.gif")
</script>

-removeAttribute()

A whole new concept, removeAttribute() allows you to remove entire HTML attributes from an element! This is particularly handy when an attribute contains multiple values which you wish to all erase:

<div id="adiv" style="width:200px;height:30px;background-color:yellow">Some Div</div>

<script type="text/javascript">
//adiv now contains no style at all
document.getElementById("adiv").removeAttribute("style")
</script>

You're out of style adiv!