JavaScript Tutorial Series: Manipulating elements styles

In this post we will learn how to alter the style of the HTML elements using the styling properties.

modifying inline styles

The style property allows you to set the inline style for an element.

Syntax

element.style

For example if you want to set the background-color of an element you can do it like so :

<p>I am a paragraph</p>

let p = document.querySelector("p");

p.style.backgroundColor =' red';

There are plenty of style properties you can set using this syntax such as:

• background
• backgroundAttachment
• backgroundColor
• backgroundImage
• backgroundPosition
• backgroundRepeat
• border
• borderBottom
• borderBottomColor
• borderBottomStyle
• borderBottomWidth
• borderColor
• borderLeft
• borderLeftColor
• borderLeftStyle
• borderLeftWidth
• borderRight
• borderRightColor
• borderRightStyle
• borderRightWidth

The list above is just a couple of properties that are available, but there are many more.

className property

The className property of an element returns a string containing a list of the element's CSS classes, separated by spaces.

Syntax

element.className;

Let's look at an example:

<ul id="list" class="main-list">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

const list = document.getElementById("list");

console.log(list.className);

classList property

The classList property is a read-only and returns a live collection of CSS classes.
Despite being read-only, the classList can still be used to manipulate the classes it contains.

get classes of an element

<ul id="list" class="main-list 3-item list">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

const list = document.getElementById("list");

for( let classes of list.classList){
  console.log(classes);
}

add a class to an element

<ul id="list" class="main-list 3-item list">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

const list = document.getElementById("list");

list.classList.add("newClass", "another");

for( let classes of list.classList){
  console.log(classes);
}

Remove an element's class

<ul id="list" class="main-list 3-item list">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

const list = document.getElementById("list");

list.classList.remove('main-list');

for( let classes of list.classList){
  console.log(classes);
}

Check if element has a specific class

This property returns a boolean. if the element has that specific class it returns true otherwise it returns false.

<ul id="list" class="main-list 3-item list">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

const list = document.getElementById("list");

console.log(list.classList.contains("main-list"));

Toggle property

The toggle() method deletes a class name from an element's class list if it is present and includes the class name in the class list if it is missing.

<ul id="list" class="main-list 3-item list">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

const list = document.getElementById("list");

list.classList.toggle("main-list");

for( let classes of list.classList){
  console.log(classes);
}

Comments

[Toby Parent]

Nice! I like it - a great high-level overview of the different ways of styling, both with classes and with inline.

I got a little deep on one I did in a similar vein, exploring ways of streamlining inline styles. dev.to/parenttobias/playing-around...