DEV Community

Cover image for JavaScript Tutorial Series: Manipulating elements styles
The daily developer
The daily developer

Posted on • Updated on

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
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode
let p = document.querySelector("p");

p.style.backgroundColor =' red';
Enter fullscreen mode Exit fullscreen mode

style property

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;
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode
const list = document.getElementById("list");

console.log(list.className);
Enter fullscreen mode Exit fullscreen mode

className property

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>
Enter fullscreen mode Exit fullscreen mode
const list = document.getElementById("list");

for( let classes of list.classList){
  console.log(classes);
}
Enter fullscreen mode Exit fullscreen mode

classList

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>
Enter fullscreen mode Exit fullscreen mode
const list = document.getElementById("list");

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

for( let classes of list.classList){
  console.log(classes);
}
Enter fullscreen mode Exit fullscreen mode

classList add

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>
Enter fullscreen mode Exit fullscreen mode
const list = document.getElementById("list");

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

for( let classes of list.classList){
  console.log(classes);
}
Enter fullscreen mode Exit fullscreen mode

classList remove

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>
Enter fullscreen mode Exit fullscreen mode
const list = document.getElementById("list");

console.log(list.classList.contains("main-list"));
Enter fullscreen mode Exit fullscreen mode

classList.contains

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>
Enter fullscreen mode Exit fullscreen mode
const list = document.getElementById("list");

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

for( let classes of list.classList){
  console.log(classes);
}
Enter fullscreen mode Exit fullscreen mode

classList toggle

Top comments (1)

Collapse
 
parenttobias profile image
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...