Element.
Sets the value of an element’s HTML attribute, or adds a new attribute.
- Returns
undefined- Changes the original
- Yes
Example
#const link = document.querySelector('#next')
link.setAttribute('href', '/lesson-2')
link.setAttribute('title', 'Go to lesson 2')
console.log(link.getAttribute('href'))
console.log(link.getAttribute('title'))
console.log(link.getAttribute('target'))
console.log(link.hasAttribute('title'))Definition and usage
#The setAttribute(name, value) method sets an element’s attribute. If the attribute already exists, its value gets overwritten, and if not, it gets added. The value is always converted to a string.
It’s accompanied by getAttribute() (reads it, returns null when the attribute is missing), hasAttribute(), removeAttribute(), and toggleAttribute(). These are especially useful for ARIA attributes, like aria-expanded, and for attributes that have no matching element property.
Many attributes also have a matching property, e.g. element.id, link.href, or input.value. They don’t always hold the same thing: getAttribute("href") returns the text typed into the HTML, while link.href returns the full address. A form field’s value attribute is its initial value, while the value property is the text currently typed by the user.
Boolean attributes, such as disabled or hidden, work through mere presence. Even setAttribute("disabled", "false") disables the button. To enable it, remove the attribute with removeAttribute(), or set the button.disabled = false property.
Syntax
#element.setAttribute(name, value)
element.getAttribute(name)
element.hasAttribute(name)
element.removeAttribute(name)
element.toggleAttribute(name)Parameters
#name
string
The attribute name, e.g."href","alt", or"aria-expanded".value
string
The new attribute value. Other types get converted to a string.
More examples
#const send = document.querySelector('#send')
send.setAttribute('disabled', 'false')
console.log(send.disabled)
send.removeAttribute('disabled')
console.log(send.disabled)
send.toggleAttribute('disabled')
console.log(send.hasAttribute('disabled'))const nick = document.querySelector('#nick')
nick.value = 'Emma'
console.log(nick.value)
console.log(nick.getAttribute('value'))const menuButton = document.querySelector('#menu-btn')
menuButton.addEventListener('click', () => {
const expanded = menuButton.getAttribute('aria-expanded') === 'true'
menuButton.setAttribute('aria-expanded', String(!expanded))
console.log('aria-expanded:', menuButton.getAttribute('aria-expanded'))
})
menuButton.click()
menuButton.click()Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- For
data-*attributes, it’s more convenient to use thedatasetproperty. - You can only turn off a boolean attribute with
removeAttribute(). The value"false"still means the attribute is present. - Use
classListfor classes andstylefor styles, instead of overwriting the wholeclassandstyleattributes.
Related entries
#- HTMLElement.datasetAn object with an element’s data-* attribute values, for reading and storing your own data.
- Element.toggleAttribute()Adds an attribute when it’s missing, or removes it when it’s present. Works best for boolean attributes, such as hidden or disabled.
- Element.classListAn object for adding, removing, toggling, and checking an element’s CSS classes.
- HTMLElement.styleAn object of styles set directly on an element (inline), for reading and changing individual CSS properties.
- document.querySelector()Returns the first element that matches a CSS selector, or null when nothing matches.
- document.createElement()Creates a new HTML element with the given tag name, ready to be inserted into the page.
Spotted a mistake or missing an example? Write to us.