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.
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
setAttributeSelect an element by id with DOM API and apply the
setAttributewith thestyleattribute.
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.
