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 style attribute.

Normally, inline css styels 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

Javascript provides DOM API to manipulate HTML elements.

  • use style cssText attribute

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

Set multiple styles to returned element 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.

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

set multiple inline CSS styles using jquery example

It is easy to apply multiple CSS styles in jquery.

Select an element using selector syntax in jquery

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

  font-size: '35px',

An example to HTML selector to add inline CSS styles

  font-size: '35px',

example to class selector to change inline css styles

  font-size: '35px',

Add and remove style CSS selectors in javascript

CSS styles can also be applied using the selector attribute.

declare css elemeents in css file to group all css styles

    font-size: 35px;

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

<div id="mycontent3" class="heading">
    javascript css apply style example

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

to add an selector using javascript, First retrive an div element using DOM API - document.getElementByID(), add class using classList.add method.


To remvoe an class selector from 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 class selector dynamically


To remvoe an class selector from html element via jquery.



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

Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
You'll get a notification every time a post gets published here.