How to manipulate HTML5 element attributes using JavaScript

Last updated: September 27, 2022.

JavaScript was build for manipulating the DOM. It therefore has a powerful toolkit of methods available for editing the values of HTML attributes.

In this post, we examine how to set, access and check for the existence of attributes.

We also take a look at the special methods available for editing the class and styles attribute in a more nuanced way.

Setting and getting current attributes

A good catch-all method for adding an attribute to a HTML5 attribute is the setAttribute() method.

It takes two arguments.

The first is the name of the attribute to add, and the second is its new value.

<article>Blah blah blah</article>

<script>

const article = document.querySelector('article');
console.log(article.hasAttribute('id')); // false

article.setAttribute('id', 'my-article');

console.log(article); // <article id="my-article">

console.log(article.hasAttribute('id')); // true
console.log(article.getAttribute('id')); // my-article

</script>

As you can see in this example, you can use hasAttribute() to check whether an attribute exists and getAttribute() to return its current value.

For standard HTML5 element attributes (e.g. id, class, src, href), you can set and access these using shorthand, dot notation:

<a>Click me</a>

<script>

const a = document.querySelector('a');

a.id = "my-download";
a.href = "https://openjavascript.info";
a.rel = "nofollow"

console.log(a); // <a id="my-download" rel="nofollow" href="https://openjavascript.info">

console.log(a.id);   // "my-download"
console.log(a.href); // "https://openjavascript.info"
console.log(a.rel);  // "nofollow"

</script>

You can set multiple attributes at the same time using Object.assign(), passing in the target and then an object with properties:

<a>Click me</a>

<script>

const a = document.querySelector('a');

Object.assign(a, {
    id: "my-download",
    href: "https://openjavascript.info",
    rel: "nofollow",
});

console.log(a); // <a id="my-download" rel="nofollow" href="https://openjavascript.info">

</script>

If a value already exists for an attribute, using any of these methods will overwrite the existing value.

Editing the class attribute

For this reason, there is a more nuanced syntax for editing class attributes, which you sometimes want to add or remove individually.

Here’s the special class syntax:

<div>Click me</div>

<script>

const div = document.querySelector('div');

div.className = "bold large bright";            // Define class list

div.classList.add('border-highlight');          // Adds border-highlight class
div.classList.remove('border-highlight');       // Remove border-highlight class
div.classList.toggle('active');                 // Adds active if absent, removes if present
div.classList.replace('active', 'nodisplay');   // Replaces active with nodisplay

</script>

Editing the styles attribute

Finally, you can change the styles attribute using setAttribute() or with dot notation shorthand.

But you can also be more precise and change individual style properties by calling style on an element and accessing its CSS property with camel case syntax:

<a>Click me</a>

<script>

const a = document.querySelector('a');

a.setAttribute('style', 'color: red;');            // Defines new in-line styles list
a.style = "color: red; background-color: blue;";   // Also defines new styles list

a.style.color = "red";                             // Sets text color to red
a.style.backgroundColor = "whitesmoke";            // Sets background color whitesmoke
a.style.textDecoration = "none";                   // Sets text-decoration to none

</script>

Related links

• OpenJavaScript:
  • Editing a HTML class attribute list using JavaScript
  • A guide to manipulating the DOM like a pro with JavaScript
• MDN Web Docs: Object.assign()

---