Different ways to set multiple CSS styles in javascript with example

Different ways to set multiple CSS styles in javascript with example

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

HTML elements constrain style using an inline CSS style or CSS selector.

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

How to add inline CSS styles in HTML

HTML elements can be styled using the style attribute.

Normally, inline CSS styles are applied using the style attribute. It contains all the CSS properties and values.

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

Let’s see examples of setting 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, So styles also can be applied using the DOM API.

Use style cssText attribute

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

add multiple styles to the div element with the style cssText attributes.

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

use setAttribute method

setAttribute method is used to set attributes on a given element. Find an element using the id selector (getElementById) set multiple inline styles using setAttribute method. The key of this method provides style and values are CSS styles.

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

Add multiple inline CSS styles using a jQuery example

It is easy to apply multiple CSS styles in jQuery. It provides multiple selectors based on id element or class

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 of an HTML element selector to add inline CSS styles

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

example to the class element 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;
}

heading is a class selector applied to the element where it is used. The other selectors such as element selector(elementname), the class selector(.selector), and id selector(#selector) can also be used.

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

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.