Black Lives Matter. Support the Equal Justice Initiative.

Elements: Classes, Properties, Attributes, Styles

Elements: Classes, Properties, Attributes, Styles

Individual elements in the document object model are the pieces that make up your webpage. Using JavaScript, after you query for them, you can manipulate them to your liking, and we'll go over the most-used manipulations.

Adding, Removing, and Testing Classes

For many different scenarios, you'll want to be able to add a CSS class to an element. After you have queried for your element, like this:

    <div class="apple">Apples are tasty.</div>
    let fruit = document.querySelector(".apple");

You can add a class to the element, like this:

    let fruit = document.querySelector(".apple");

Now the element looks like this:

    <div class="apple tasty">Apples are tasty.</div>

Removing a class is the same process in reverse. Once you have an element, you can remove a class from its class list, like so:

    let fruit = document.querySelector(".apple");

Finally, to check if an element contains a class or not, simply call the contains function on the element's class list.

    let fruit = document.querySelector(".apple");

    if (fruit.classList.contains("tasty")) {
        console.log("This fruit is tasty!");
    } else {
        console.log("This fruit is not tasty!");
    This fruit is tasty!

Setting, Getting, and Removing Properties

Properties on DOM elements can be manipulated in JavaScript because they are simply object properties. These are examples of some properties to work with:

  • value: The value of a tag (usually found on input tags).
  • href: The link of an anchor.
  • alt: The alternative text of an image.
  • title: Information about an element.

Let's say you want to dynamically set an anchor tag's href tag:

    <a>Click here to go to</a>
    let link = document.querySelector("a");
    link.href = "";

When the code runs, you'll get this:

    <a href="">Click here to go to</a>

Now, let's say you want to get the value of a input text field for a username.

    <input type="text" class="username">
    let usernameInput = document.querySelector(".username");

Now that you've gotten the element, all you need to do is access its value property, like so:

    let usernameInput = document.querySelector(".username");
    let usernameValue = usernameInput.value;


Since this is JavaScript after all, if you really wanted to, you could create your own properties.

    <span>Halloween is my favorite holiday.</span>
    let span = document.querySelector("span"); = "Halloween";


This would result in the following output on your console:


If you've created a new property but then decide that you no longer want it, you can use the delete statement on it to get rid of it.

    let span = document.querySelector("span"); = "Halloween";



Getting, Setting, and Removing Attributes

Similar to properties, you can also manipulate an element's attributes. The only difference is that instead of accessing it as a property, this time you are using methods.

To get an attribute, simply use getAttribute and then pass in the name of the attribute you want.

    <img src="">
    let animal = document.querySelector("img");

Since we are asking for the src attribute, that is what we get back:

Setting an attribute is just as easy as getting them. Use the setAttribute method which takes two parameters, the name of the attribute, and then its value.

    <img src="">
    let animal = document.querySelector("img");
    animal.setAttribute("alt", "This is a picture of a cat.");

Running this code gives you this element:

    <img src="" alt="This is a picture of a cat.">

Finally, to remove an attribute from an element, use removeAttribute and pass in the name of the attribute you want gone.

Let's remove the alt attribute we just added:

    let animal = document.querySelector("img");
    <img src="">

Dynamically Applying Styles to Elements

Dynamically applying styles to an element is one of the most powerful techniques you can use when done correctly.

With some basic markup like this:

    <div>This is sample text.</div>

You can print out all of the styles being applied to this element and their values with getComputedStyle.

    let div = document.querySelector("div");
	let style = getComputedStyle(div, null);


Because the styles are all nicely organized for us as properties, adjusting or reading the styles of elements becomes extremely easy.

For example, this is how to turn that div's background color to red:

    let div = document.querySelector("div"); = "red";
Before background color change.
Before background color change.
After background color change.
After background color change.

This works for every style property, but here are some others you can try out:

  • backgroundColor: Adjust the background color.
  • display: Adjust the display value.
  • color: Adjust the text color.
  • border-radius: Adjust the border's radius.
  • padding: Adjust the padding inside an element.
  • margin: Adjust margins around an element.

The possibilities here are limited only by your imagination.