Add Classes To An Element - JavaScript Tutorial

Skip to content

Home » Add a Class to an Element

To add a class to an element, you use the classList property of the element. Suppose you have an element as follows:

<div>Item</div>Code language: HTML, XML (xml)

To add the box class to the <div> element, you use the following:

const div = document.querySelector('div'); div.classList.add('box');Code language: JavaScript (javascript)

It’s possible to add multiple classes. The following adds three classes to the <div> element:

const div = document.querySelector('div'); div.classList.add('box','primary','rounded');Code language: JavaScript (javascript)Send Cancel PreviouslyGet Width and Height of an Element Up NextRemove a Class from an Element Search for:

Getting Started

• What is JavaScript
• Install a JavaScript Code Editor
• Meet the Console Tab of Devtools
• JavaScript Hello World

JavaScript Fundamentals

• Syntax
• Variables
• Data Types
• Number
• Numeric Separator
• Boolean
• String
• Object
• Primitive vs. Reference Values
• Array

JavaScript Operators

• Arithmetic Operators
• Remainder Operator
• Assignment Operators
• Unary Operators
• Comparison Operators
• Logical Operators

Control Flow

• if
• if else
• if else if
• Ternary Operator (?:)
• switch case
• while
• do while
• for
• break
• continue
• Comma Operator

JavaScript Functions

• Functions
• Functions are First-Class Citizens
• Anonymous Functions
• Understanding Pass-By-Value in JavaScript
• Recursive Functions
• Default Parameters

JavaScript Objects

• Object Methods
• Constructor Functions
• Prototype
• Constructor/Prototype Pattern
• Prototypal Inheritance
• JavaScript this
• globalThis
• Object Properties
• for…in Loop
• Enumerable Properties
• Own Properties
• Factory Functions
• Object Destructuring
• Optional Chaining Operator
• Object Literal Syntax Extensions

Classes

• Class
• Getters & Setters
• Class Expressions
• Computed Properties
• Inheritance
• new.target
• Static Methods
• Static Properties
• Private Fields
• Private Methods
• instanceof Operator

Advanced Functions

• Function Type
• The call() Method
• The apply() method
• The bind() Method
• Closures
• Immediately Invoked Function Expression (IIFE)
• Returning Multiple Values
• Arrow Functions
• Arrow Functions: Do & Don’t
• Rest Parameters
• Callback

Promises & Async/Await

• Promises
• Promise Chaining
• Promise.all()
• Promise.race()
• Promise.any()
• Promise.allSettled()
• Promise.prototype.finally()
• Promise Error Handling
• async/await
• Promise.withResolvers()

JavaScript Modules

• Modules
• Dynamic Import
• Top-level Await Modules

Javascript Error Handling

• try…catch
• try…catch…finally
• Throw an Exception
• Optional catch Binding

JavaScript Runtime

• Execution Context
• Call Stack
• Event Loop
• Hoisting
• Variable Scopes

Primitive Wrapper Types

• Primitive Wrapper Types
• Boolean
• Number
• BigInt
• String

More JavaScript Operators

• Falsy
• Nullish Coalescing Operator
• Logical Assignment Operators
• Exponentiation Operator