JavaScript Tutorial Series: Manipulating elements styles
Published: 2023-03-07 21:28:26

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

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

```HTML
<p>I am a paragraph</p>
```

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

p.style.backgroundColor =' red';
```

![style property](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aplk5wyxh3gq1lveagh5.png)

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

```JavaScript
element.className;
```

Let's look at an example:

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

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

console.log(list.className);
```

![className property](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aa14kxf3viigghy3rvp4.png)

## 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
```HTML
<ul id="list" class="main-list 3-item list">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>
```

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

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

![classList](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gvyrutdttx7orsmvslk2.png)

### add a class to an element
```HTML
<ul id="list" class="main-list 3-item list">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>
```
```JavaScript
const list = document.getElementById("list");

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

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

![classList add](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c4fudf91sra675eqwcco.png)

### Remove an element's class
```HTML
<ul id="list" class="main-list 3-item list">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>
```
```JavaScript
const list = document.getElementById("list");

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

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

![classList remove](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kkox2tfxhw4p1e34526y.png)

### 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.

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

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

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

![classList.contains](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ahmayr75vlnuauy3fuzt.png)

### 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.

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

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

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

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

![classList toggle](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x1nxr1tzuzf5xrxsdkmt.png)