Different ways to set multiple CSS styles in javascript with example

Sometimes, We want to apply HTML CSS styles using javascript code.

Html elements do style using an inline CSS selector or CSS selector.

Let’s see examples to add inline CSS and class styles to HTML with javascript programming.

How to set multiple inline CSS styles in Javascript

HTML elements can be styled using the style attribute.

Normally, inline CSS styles are applied using below

<div id="mycontent3" style="font-size: 35px; color: red;">
  Javascript CSS apply style example

Let’s see examples to set multiple inline styles using javascript and jquery.

Declare div element with text content.

<!doctype html>
    <title>HTML, CSS and JavaScript demo</title>
    <div id="mycontent3">Javascript CSS apply style example</div>

Javascript provides DOM API to manipulate HTML elements.

  • use style cssText attribute

First, get an element using the id selector(id=mycontent3), In this document.getElementById() selects a div element.

Set multiple styles to returned elements with style cssText attributes.

document.getElementById("mycontent3").style.cssText =
  "font-size: 35px; color:red;";
  • use setAttribute

    Select an element by id with DOM API and apply the setAttribute with the style attribute.

  .setAttribute("style", "font-size: 35px; color:red;");

set multiple inline CSS styles using a jquery example

It is easy to apply multiple CSS styles in jquery.

Select an element using selector syntax in jquery

here is a jquery to set multiple inline styles for an id selector

  font-size: '35px',
  color: `red`

An example of an HTML selector to add inline CSS styles

  font-size: '35px',

example to the class selector to change inline CSS styles

  font - size: '35px',
  color: `red`

Add and remove style CSS selectors in javascript

CSS styles can also be applied using the selector attribute.

declare CSS elements in the CSS file to group all CSS styles

.heading {
  font-size: 35px;
  color: red;

Html element is applied styles using element selector(elementname), the class selector(.selector), and id selector(#selector) syntax.

<div id="mycontent3" class="heading">Javascript CSS apply style example</div>

Let’s see an example of how to add a CSS selector.

to add a selector using javascript, First, retrieve a div element using DOM API - document.getElementByID(), and add class using the classList.add method.


To remove a class selector from an HTML element via javascript.


Add and remove style CSS selectors in jquery

In this example, add and remove class names using jquery.

Here is an example to add a class selector dynamically


To remove a class selector from an HTML element via jquery.



To Sum up, Multiple ways to add inline multiple CSS styles and class names using javascript and jquery with examples.