How To Set Custom Attribute Using JavaScript?
Last Updated :
05 Sep, 2024
In modern web development manipulating HTML elements dynamically is a common requirement. One such task is setting custom attributes on elements to store additional data or metadata.
Custom attributes referred to as data attributes allow developers to attach extra information to elements. In this article, we will see various methods to set custom attributes using JavaScript.
Why use Custom Attribute?
Custom Attributes are useful because they allow you to store information directly in your HTML elements. You can easily access and change these attributes using JavaScript.They can help manage dynamic changes on your web pages, like tracking a user's actions.
Prerequisites
These are the approaches to set custom attributes using JavaScript:
1. Using the setAttribute() method
In this approach, we will use the setAttribute() method which is a simple way to set any attribute including custom attributes, on an HTML element. This method allows us to specify the attribute name and value as strings.
Syntax:
element.setAttribute('data-custom-attribute', 'value');Example: In this example we are using the setAttribute() method to set custom attribute using JavaScript and then retire its value.
JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Set Custom Attribute</title>
</head>
<body>
<div id="myElement">Welcome to GeeksForGeeks!</div>
<script>
const element =
document.getElementById('myElement');
element.setAttribute('data-info', 'customValue');
console.log(element.getAttribute('data-info'));
</script>
</body>
</html>
Output:
Open console to see output
customValue
2. Using element.attributeName syntax
We can also set custom attributes by directly assigning values to the attribute name using dot notation. However, this approach is less common and is typically used for standard attributes rather than custom ones.
Syntax:
element.customAttribute = 'value';
Example: In this example we are using element.attributeName syntax to set custom attribute using JavaScript.
JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Set Custom Attribute</title>
</head>
<body>
<div id="myElement">
Welcome to GeeksForGeeks!</div>
<script>
const element =
document.getElementById('myElement');
element.dataInfo = 'customValue';
console.log(element.dataInfo);
</script>
</body>
</html>
Output:
Open console to see output
customValue
Similar Reads
How to add/update an attribute to an HTML element using JavaScript? To add/update an attribute to an HTML element using JavaScript, we have multiple approaches. In this article, we are going to learn how to add/update an attribute to an HTML element using JavaScript. Below are the approaches used to add/update an attribute to an HTML element using JavaScript: Table
2 min read
How to set attribute value in Cypress ? In Cypress, you may need to modify or set the value of an element's attribute during a test. This can be useful for dynamically updating the state of an element or manipulating the DOM to simulate different scenarios. You can set attribute values using jQuery methods like .attr() or Cypress's native
2 min read
How to change style attribute of an element dynamically using JavaScript ? Given an HTML document and the task is to change the style properties (CSS Properties) of an element dynamically with the help of JavaScript. Approach: Using element.style PropertyThe element.style property is represented by the CSSStyleDeclaration object, which is returned via the style property. S
2 min read
How to Create an Image Element using JavaScript? Creating an image element dynamically using JavaScript is a useful technique when you want to add images to a webpage without having to manually write the <img> tag in your HTML. This allows for more flexibility, as we can create and manipulate images based on user interactions or other condit
2 min read
JavaScript - How to Get the Data Attributes of an Element? Here are the various methods to get the data attributes of an element using JavaScript1. Using dataset PropertyThe dataset property in JavaScript allows you to access all data attributes of an HTML element as a DOMStringMap object. It simplifies retrieving, modifying, or interacting with custom data
2 min read
How to set attribute without value using jQuery ? There are many ways to set attributes without value using jQuery. jQuery prop() method is used to get or set the values of attributes. To change the properties like checked, default checked, disabled, selectedIndex, default selected and selected state of Document Object Model, use the jQuery .prop()
2 min read