{

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 styles are applied using below

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

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

Declare div element with text content.

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

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.

document.getElementById("mycontent3").setAttribute(
   "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 a jquery to set multiple inline styles for an id selector

$('#mycontent3').css({
  font-size: '35px',
  color:`red`
});

An example to HTML selector to add inline CSS styles

$('div').css({
  font-size: '35px',
  color:`red`
});

example to the class selector to change inline CSS styles

$('.classname').css({
  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), 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 an selector using javascript, First retrive an div element using DOM API - document.getElementByID(), add class using classList.add method.

document.getElementById("mycontent3").classList.add("heading");

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

document.getElementById("mycontent3").classList.remove("heading");

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

$('#mycontent3').classList.add("heading");

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

$('#mycontent3').classList.remove("heading");

Conclusion

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

THE BEST NEWSLETTER ANYWHERE
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
Subscribe
You'll get a notification every time a post gets published here.