Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to change the value of an attribute in javascript?
In JavaScript, changing attribute values dynamically allows you to create interactive web pages. Whether you need to modify styles, swap images, or update element properties, JavaScript provides several methods to manipulate HTML attributes.
To change an attribute value, you first need to access the HTML element using methods like getElementById(), then modify the attribute directly or use methods like setAttribute().
Syntax
Here are the main approaches to change attribute values:
// Direct property access
element.attribute = new_value;
// Using setAttribute method
element.setAttribute("attribute", "value");
Parameters
attribute ? The name of the attribute to modify
new_value/value ? The new value to assign to the attribute
Changing Style Attributes
The most common use case is modifying CSS styles dynamically. You can access the style property and change individual CSS properties.
<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 text.</div>
<button onclick="changeBackground()">Change Background</button>
<script>
function changeBackground() {
let fontsDiv = document.getElementById("fonts");
fontsDiv.style.backgroundColor = 'green';
fontsDiv.style.color = 'white';
fontsDiv.style.padding = '10px';
}
</script>
</body>
</html>
Changing Image src Attribute
You can dynamically change image sources to create image toggles or galleries.
<html>
<head>
</head>
<body>
<h2>Toggle Image by Changing src Attribute</h2>
<h4>Click the button to change the image source.</h4>
<img id="img" src="/images/logo.png" alt="demo" width="200">
<button onclick="toggleImage()">Toggle Image</button>
<script>
let isOriginal = true;
function toggleImage() {
let imgElement = document.getElementById("img");
if (isOriginal) {
imgElement.src = "/images/alternate-logo.png";
imgElement.alt = "Alternate Image";
} else {
imgElement.src = "/images/logo.png";
imgElement.alt = "Original Image";
}
isOriginal = !isOriginal;
}
</script>
</body>
</html>
Using setAttribute() Method
The setAttribute() method allows you to add new attributes or modify existing ones. This method is particularly useful for custom attributes or when the attribute name is dynamic.
<html>
<head>
</head>
<body>
<h2>Set New Attribute using setAttribute()</h2>
<h4>Adding custom attributes and modifying element properties.</h4>
<img id="img" src="/images/sample.jpg" alt="demo">
<button onclick="modifyAttributes()">Modify Attributes</button>
<script>
function modifyAttributes() {
let imgElement = document.getElementById("img");
imgElement.setAttribute("height", "200");
imgElement.setAttribute("width", "300");
imgElement.setAttribute("data-modified", "true");
imgElement.setAttribute("title", "Modified Image");
}
</script>
</body>
</html>
Common Use Cases
| Attribute Type | Method | Use Case |
|---|---|---|
| CSS Styles | element.style.property | Dynamic styling, animations |
| src, href | element.src = value | Image swapping, link changes |
| Custom/Data attributes | setAttribute() | Storing metadata, configuration |
| Form attributes | element.disabled = true | Form validation, UI state |
Conclusion
JavaScript provides flexible ways to change HTML attributes dynamically. Use direct property access for common attributes like src and style, and setAttribute() for custom attributes or when you need programmatic attribute names. This enables you to create interactive and responsive web applications.
23K+ Views
