Modifying Element Attributes

The Element class has various properties and methods that allow us to manipulate elements. Some commonly used properties are

Element.id
Element.className
Element.style

For example, consider the HTML code below. This HTML creates a button and 2 boxes. The first box has its background-color (blue) defined in a class named blue-box, and the second box has its background-color (pink) defined in a class named pink-box. When the button is pressed, the classes assigned to each div are swapped, causing the background color of the divs to alternate.

<div id="container" class="box-container">
    <div class="box blue-box">One</div>
    <div class="box pink-box">Two</div>
</div>

One

Two

The JavaScript code in setAttributeButtonHandler() swaps the strings in the class attributes as shown below.

var container = document.getElementById("container");     
var boxes = container.getElementsByClassName("box");
    
var temp = boxes[0].className;     
boxes[0].className = boxes[1].className;     
boxes[1].className = temp;

Element.getAttribute()

The getAttribute(name) method takes a string holding an HTML attribute name as an argument and returns a string holding the value associated with the HTML attribute. If the attribute does not exist, the method returns null.

var value = elm.getAttribute(“class”);

Event handler attributes (e.g. onclick) behave differently. The Element properties for event handlers holds a function object that can be changed. The getAttribute() does not return the function objects for event handler attributes, but rather simply returns the name of the function.

Element.setAttribute()

The setAttribute(name, value) method updates the attribute named in the first argument with the value of the second argument.

elm.setAttribute("class", "box blue-box");

Element.removeAttribute()

The removeAttribute(name) method takes an attribute name as an argument and removes the attribute from the element.

elm.removeAttribute("class");

The example below toggles the class attribute for the boxes from “box” to “box blue-box” to “box pink-box” using getAttribute() and setAttribute().

One

Two

var container = document.getElementById("container");
var boxes = container.getElementsByClassName("box");

var value = boxes[0].getAttribute("class");
value = (value.length == 3) ? "box blue-box" : (value == "box blue-box") ? "box pink-box" : "box";
boxes[0].setAttribute("class", value);

var value = boxes[1].getAttribute("class");
value = (value.length == 3) ? "box blue-box" : (value == "box blue-box") ? "box pink-box" : "box";
boxes[1].setAttribute("class", value);

Retrieving and Modifying an Element’s CSS Properties

You can retrieve the CSS properties of an element by using the getComputedStyle() function. For example, to get the CSS properties of a div we would do the following.

const element = document.getElementById("div1")
const styles = getComputedStyle(element)

Once you have retrieved the element’s styles, you can retrieve an individual CSS property by using the dot operator followed by the property name written in what is called camel casing. A property written in camel casing omits all hyphens and capitalizes the letters that follows the hyphens. For example, the background-color property is written as backgroundColor.

const color = styles.backgroundColor;

All of the CSS property values are strings and some of the strings have units. For example, the width property of a box is given in pixels. In order to use the width as an integer you need to strip away the units and convert the String to a Number. We can do so by using the parseInt() function. The first argument to parseInt() is a string and the second is the radix (a number indicating the number system that you want the result to be represented in). Since width dimensions are represented in the normal base 10 number system, we specify 10 as the radix.

let width = parseInt(style.width, 10);

Now that the variable named width holds a Number we can use it to change the value of the element’s width property, for example, increasing its width by 10. We can change an element’s CSS property through the element’s style object. Notice that we append “px” to the Number (width + 10).

element.style.width = (width + 10) + "px";

Note that if the CSS property has a hyphen in it, the name of the property is written in camelCasing, just like above. For example, to set the CSS background-color property we would use style.backgroundColor.

element.style.backgroundColor = "red";