How to change the value of an attribute in javascript?

Front End Scripts Javascript Web Development

In this tutorial, we will learn to change the value of an attribute in JavaScript. To build web applications, the most programmer uses three languages. HTML, CSS, and JavaScript. The HTML is used to create the base for the web page, CSS for styling, and JavaScript adds the dynamic behaviours to the web page.

Users have seen on many websites that it changes the element's style when they just click on the button. We can make it happen using JavaScript.

Using JavaScript, let’s look at setting the new attribute for the HTML element or changing the attribute values dynamically.

To change the attribute value of an element, we need to access that element in JavaScript either using element id, class name, or any other way. We can access the attribute using .attribute_name, and assign a new value to it.

Syntax

Here, is the general syntax to change the value of any attribute.

element.attribute = new_value

parameters

attribute − It is the name of the attribute.
new_value − It is the new value for the accessed attribute.

Change the Style Attribute Value

In this section, we will change the background color of the div element using JavaScript. We can simply access the style attribute of the element. The style attribute also contains various properties to style the element, such as font size, color, background color, height, width, etc., and many more.

Syntax

Follow the below syntax to change the style attribute value.

let element = document.getElementById( "element_id" );
element.style.backgroundColor = ‘color’;

Example

In the below example, we have created the <div> element inside the HTML and accessed it using the id in the <script> tag. We have created the button, and when the user clicks on it, it will change the background color of the div. To change the background color, we have access to the backgroundColor property of the style attribute and assigned the value.


<html>
<head>
</head>
<body>
   <h2>Change the attribute value using JavaScript.</h2>
   <h4>Click the button to change the <i> background-color <i> of the below text.</h4>
   <div id = "fonts">change color of this.</div>
   <button onclick = "changeBackground()">change background</button>
   <script>
      function changeBackground() {
         let fontsDiv = document.getElementById("fonts");
         fontsDiv.style.backgroundColor = 'green'; // change background color of div element using style attribute
      }
   </script>
</body>
</html>

Toggle the Image by Changing the src Attribute Value

In this section, we will learn to change the value of the src attribute of the <img> element of HTML. As in the above section, we will access the image element using the id and replace the src attribute value for a particular element.

Also, users have seen this kind of functionality in many applications when they click on the button, the image changes.

Users can follow the syntax below to change the value of the image's src attribute.

Syntax

let imgDiv = document.getElementById( "image_id" ); // access the image using id
imgDiv.src = 'new_image_URL'

Example

In the below example, we have rendered the image on the screen. When a user clicks on the change Image button, it will replace the value of the src attribute of the image with the new URL, and users can see the new image on the screen.


<html>
<head>
</head>
<body>
   <h2>Change the attribute value using JavaScript.</h2>
   <h4>Changing the <i> src attribute value </i> of below image on button click.</h4>
   <img id = "img" src = "https://www.tutorialspoint.com/python_pillow/images/tutorials_point.jpg" alt = "demo">
   <button onclick = "changeImage()">change Image</button>
   <script>
      function changeImage() {
         let imgDiv = document.getElementById("img");
         imgDiv.src = 'https://www.tutorialspoint.com/images/QAicon-black.png'; // replace the image on button click.
      }
   </script>
</body>
</html>

Set New Attribute to the Element

In this part of the tutorial, we will learn about the setAttribute() method of JavaScript. We have learned to change the value of the attribute. What if we need to add a new attribute with its value to the HTML element? In such cases, we have to use the setAttribute() method.

Syntax

Following is the syntax to use the setAttribute() method −

let element = document.getElementById( "element_id" );
element.setAttribute( "attribute", "value" );

Parameters

attribute − it is a name of the new attribute.
value − It is a value for the new attribute.

Example

In the example below, we created the <img> element and clickable button. When the user clicks on the button, it will add a new attribute called height with the value 200px to the <img> element. So, the image height will become smaller.


<html>
<head>
</head>
<body>
   <h2>set new Attribute to the HTML element using JavaScript.</h2>
   <h4>Adding the <i> height attribute </i> to the below image and set it to 200px.</h4>
   <img id = "img" src = "https://www.tutorialspoint.com/python_pillow/images/tutorials_point.jpg" alt="demo">
   <button onclick = "changeImage()">change Image height</button>
   <script>
      function changeImage() {
         let imgDiv = document.getElementById( "img" );
         imgDiv.setAttribute( "height", "200px" ); // set height attribute to image div
      }
   </script>
</body>
</html>

We have learned to change the value of the existing attribute in this tutorial. Furthermore, we have learned to add new attributes with value to any HTML element using JavaScript. Programmers need to learn to add behaviours to the webpage using JavaScript, and we have learned something about that.