How to Change the Attributes of an HTML Element Using Javascript

Javascript can be used to change the attribute(s) of a HTML element, such as a paragraph, a header, an image, or a list, or any various HTML elements.

For example, by changing the src attribute of an img tag, we can change the image entirely to something else with Javascript.

Look at the image below and then click the button underneath:

Change image

We have just changed the image by using javascript to change the src attribute. Once the src attribute of the img tag was altered from the Sony X10 headphone to the alienware computer, we could change the image with any event, in this case a click of the 'Change Image' button.

We could change any attribute of any HTML element with Javascript.

To do this, we use the line:

document.getElementById ("id_name").attribute ="value";

where id_name is the id of the element you are selecting, attribute is the attribute of the element you want to change, and value is the new value which you want to assign to the attribute to change its value to something else.

So for our image to change from the Sony X10 headphones to the alienware computer, we use the lines:

<script> function changeimage() { document.getElementById("image").src="/images/Alienware-laptop.png"; } </script>

The HTML code of the original image tag we are changing is:

<img id="image" src="/images/sony-x10-headphones.png">

So when we use the Javascript line document.getElementById("image") we are telling Javascript to get HTML element which has an id of image. The attachment .src. is referencing the image's src attribute. We now assign this to "/images/Alienware-laptop.png" to change the src attribute from "/images/sony-x10-headphones.png" to this.

All we have to do then do from this point is put this above method in a function and call this function when the button 'Change Image' is clicked.

But changing an element's attribute is as simply as referencing the element by ID, adding .attribute, and then using an equal assignment statement to put the attribute's new value, using the format document.getElementById ("id").attribute= "new_value".

More Examples

Let's do a few more examples to show the power of Javascript to be able to change HTML element attributes.

Let's go back to an image tag and now let's modify other attributes, the height and width attributes.

Let's say we have an image below:



Make Image Smaller

To make the above image smaller, we again use the same format.

Once this time, we change the image's height and width elements to smaller dimensions.

The HTML code of the original element is:

<img id="imagesize" width="871px" height="307px" alt="aptera" src="/images/car.png">

So to modify the height and width attributes of this img tag with an id of imagesize, we use the following lines of Javascript code:

<script> function changeimagesize() { document.getElementById("imagesize").height=188; document.getElementById("imagesize").width= 534; } </script>

We then put this in a function so that the button will call this function when clicked.

If you become a little more dynamic, this application below allows you to specify the height of the image so that a user can enter the height dimension that he wants the image to be.



Enter height:
Submit

Above you enter the height which you want the image to be in pixels (px).

Enter any value and the image will be that in height.

To create this, you first create an HTML text box which allows a user to enter in a height value, such as like the one shown above. You assign an id element to this element. If we assign the id of imageheight, then we can obtain the value which the user enters into the text box and store it.

We access the value entered into the text box with document.getElementById ("imageheight").value and we store it by creating a variable called height.

After we have this, we now reference the image.

The HTML for the original image is:

<img id="imageheight" alt="flat screen tv" src="/images/flat-screen.png">

To allow for Javascript to change this image's height attribute to the value which the user enters, we use the following line of code in Javascript:

function altersize() { var height= document.getElementById("heightsize").value; document.getElementById("imageheight").height= height; }

This gives the new height which the user specified to the image. Now all that must be done is the above lines should be placed into a function. Once a submit button is created, it should have an onclick() function which calls the function to change the image height.