Inside the directory you created for this course on JavaScript, create a new folder called Exercise-46-Redefining-className and put the .html solution files for this exercise within it.

This is a fairly easy exercise to solve.

We just ought to define an accessor property called className, on the Element interface, with a getter and a setter function.

The getter function simply gets the value of the class attribute on the calling element node, whereas the setter function simply sets the value of the attribute on the node.

That's just it.

In the code below, we accomplish this idea:

Object.defineProperty(Element.prototype, 'className', {
   get: function() {
      return this.getAttribute('class');
   },
   set: function(value) {
      this.setAttribute('class', value);
   }
});

Let's now test this implementation.

Recall the following code from the chapter HTML DOM — Attributes while we were learning about the className property:

<h1 id="h1">A heading</h1>

.text-blue {
   color: blue
}

var h1Element = document.getElementById('h1');

// Add the class 'text-blue'.
h1Element.className = 'text-blue';

It just sets a text-blue class on the <h1> element to get it colored blue.

Now, let's run this same code with our manual className implementation, including some console.log() statements in the implementation to be sure that it really gets put into action:

Object.defineProperty(Element.prototype, 'className', {
   get: function() {
      console.log('Getter invoked');
      return this.getAttribute('class');
   },
   set: function(value) {
      console.log('Setter invoked');
      this.setAttribute('class', value);
   }
});
               
var h1Element = document.getElementById('h1');

// Add the class 'text-blue'.
h1Element.className = 'text-blue';

In the link below, open up the console and see whether there is the log Setter invoked present. If there is one, this confirms that it's our implementation that's being invoked in line 15 above.

Live Example

And voila! When we open up the link, there is indeed the desired log present.

The same methodology could be used to check the execution of the getter function associated with className — access it in a get context and then witness the log Getter invoked.