JavaScript setAttribute
last modified April 2, 2025
In this article, we explore the element.setAttribute method in
JavaScript. This method is essential for DOM manipulation, allowing developers
to add or modify attributes on HTML elements dynamically.
Basic Definition
The setAttribute method sets the value of an attribute on the
specified element. If the attribute already exists, the value is updated;
otherwise, a new attribute is added with the specified name and value.
This method takes two parameters: the attribute name (string) and the attribute value (string). It's widely used for modifying element properties like class, id, style, and custom data attributes.
Basic setAttribute Example
This example demonstrates how to set a simple attribute on an HTML element.
<!DOCTYPE html>
<html>
<head>
<title>Basic setAttribute</title>
</head>
<body>
<div id="myDiv">Sample Content</div>
<button onclick="addClass()">Add Class</button>
<script>
function addClass() {
const div = document.getElementById('myDiv');
div.setAttribute('class', 'highlight');
}
</script>
</body>
</html>
In this basic example, we have a div element and a button. When the button is
clicked, the addClass function adds a 'highlight' class to the div
using setAttribute.
This shows the fundamental usage of setAttribute to modify element
attributes. The method works for both standard HTML attributes and custom ones.
Changing Image Source
This example shows how to dynamically change an image source using setAttribute.
<!DOCTYPE html>
<html>
<head>
<title>Changing Image Source</title>
</head>
<body>
<img id="myImage" src="image1.jpg" alt="Sample Image">
<button onclick="changeImage()">Change Image</button>
<script>
function changeImage() {
const img = document.getElementById('myImage');
img.setAttribute('src', 'image2.jpg');
img.setAttribute('alt', 'New Image');
}
</script>
</body>
</html>
Here we have an image element and a button. When clicked, the button changes
both the image source and alt text using setAttribute.
This demonstrates how setAttribute can update multiple attributes
at once. It's particularly useful for dynamic content changes like image
switching.
Adding Data Attributes
This example demonstrates how to add custom data attributes to elements.
<!DOCTYPE html>
<html>
<head>
<title>Data Attributes</title>
</head>
<body>
<div id="info">User Information</div>
<button onclick="addData()">Add Data</button>
<script>
function addData() {
const div = document.getElementById('info');
div.setAttribute('data-user-id', '12345');
div.setAttribute('data-role', 'admin');
}
</script>
</body>
</html>
In this example, we add custom data attributes to a div element when the button is clicked. These attributes follow the HTML5 data-* naming convention.
Custom data attributes are useful for storing extra information in HTML elements
that can be accessed later via JavaScript. setAttribute is perfect
for this purpose.
Disabling a Button
This example shows how to disable a button using setAttribute.
<!DOCTYPE html>
<html>
<head>
<title>Disabling a Button</title>
</head>
<body>
<button id="myButton" onclick="disableMe()">Click to Disable</button>
<script>
function disableMe() {
const btn = document.getElementById('myButton');
btn.setAttribute('disabled', '');
btn.textContent = 'Button Disabled';
}
</script>
</body>
</html>
Here we have a button that disables itself when clicked. The
setAttribute method adds the 'disabled' attribute to the button.
Boolean attributes like 'disabled' don't need a value - their presence alone
changes the element's behavior. setAttribute handles these cases
correctly.
Changing Input Type
This example demonstrates changing an input field's type dynamically.
<!DOCTYPE html>
<html>
<head>
<title>Changing Input Type</title>
</head>
<body>
<input id="myInput" type="text" placeholder="Enter password">
<button onclick="togglePassword()">Show/Hide Password</button>
<script>
function togglePassword() {
const input = document.getElementById('myInput');
const currentType = input.getAttribute('type');
if (currentType === 'password') {
input.setAttribute('type', 'text');
} else {
input.setAttribute('type', 'password');
}
}
</script>
</body>
</html>
In this example, we toggle an input field between text and password types. The
setAttribute method modifies the 'type' attribute based on its
current value.
This demonstrates how setAttribute can be used with
getAttribute to create toggle functionality. It's a common pattern
for password visibility toggles.
Source
MDN setAttribute Documentation
In this article, we have shown how to use element.setAttribute
in JavaScript. This method is fundamental for dynamic attribute manipulation
in web development.
Author
List all JS DOM tutorials.