The JavaScript setAttribute() method
The setAttribute() method sets an attribute on an element, adding it or updating its value. el.setAttribute("disabled", "") or img.setAttribute("src", url). It's the general way to set any attribute, including data-* and aria-*. Its partners are getAttribute() and removeAttribute().
Overview
setAttribute() writes an attribute onto an element. You give it the attribute name and a value, and it either creates the attribute or overwrites the existing one. link.setAttribute("href", "/home"), input.setAttribute("placeholder", "Email"), el.setAttribute("aria-expanded", "true") — it works for standard attributes, ARIA attributes and custom data-* ones alike.
There's a subtlety worth understanding: many attributes also exist as DOM properties, and you can often set either. For most cases the property is simpler — img.src = url reads better than img.setAttribute("src", url). But property and attribute don't always line up (class is the className property; el.value reflects current state while the value attribute is the default), so setAttribute() is the reliable, uniform option when you want the attribute itself, especially for data-* and aria-*.
To read an attribute back, use getAttribute(); to delete one, use removeAttribute(). For boolean attributes like disabled, note that their mere presence makes them true — the value string barely matters — so toggling them via the property (el.disabled = true) or removeAttribute() is often clearer.
Syntax
element.setAttribute(name, value)
img.setAttribute("src", "/photo.jpg");
btn.setAttribute("aria-pressed", "true");
el.setAttribute("data-id", "42");Parameters
The setAttribute() method accepts the following parameters.
| Parameter | Description |
|---|---|
name |
The attribute name to set, e.g. "src", "href", "aria-label", "data-id". |
value |
The value to assign, as a string. Numbers and booleans are converted to strings. |
Example
<a id="link" style="font:15px system-ui">A link with no href yet</a>
<script>
const link = document.getElementById('link');
link.setAttribute('href', 'https://codeshack.io');
link.setAttribute('target', '_blank');
link.textContent = 'Now it points to CodeShack';
</script>Best practices
- Use it for
data-*andaria-*attributes, where it's the natural, uniform choice. - For common standard attributes, the matching property (
img.src,el.id) is often simpler. - Read with getAttribute() and delete with
removeAttribute(). - For boolean attributes like
disabled, prefer the property (el.disabled = true) for clarity.
Frequently asked questions
How do I set an attribute in JavaScript?
element.setAttribute(name, value), e.g. img.setAttribute("src", url).What is the difference between setAttribute() and setting a property?
setAttribute() sets the HTML attribute; a property like img.src sets the live DOM value. They usually agree, but for cases like value and class they differ, so pick deliberately.How do I set a data attribute?
el.setAttribute("data-id", "42"), or the dataset property: el.dataset.id = "42".How do I remove an attribute?
element.removeAttribute(name).