Menu
Is it possible to add/update a css class using JQuery.
I know I can add css to a DOM element using this add css rule using jquery, but I would like to add/remove from the css class itself.
378
jQuery addClass() Method The addClass() method adds one or more class names to the selected elements. This method does not remove existing class attributes, it only adds one or more class names to the class attribute. Tip: To add more than one class, separate the class names with spaces.
If you want to use a class, use a full stop (.) followed by the class name in a style block. Next, use a bracket called a declaration block that contains the property to stylize the element, such as text color or text size. CSS Classes will help you stylize HTML elements quickly.
jQuery css() Method The css() method sets or returns one or more style properties for the selected elements. When used to return properties: This method returns the specified CSS property value of the FIRST matched element.
When I write down this code to easily understand
Code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("h1,p").toggleClass("blue");
$("div").toggleClass("important");
});
});
</script>
<style>
.important {
font-weight: bold;
font-size: 40px;
color: chartreuse;
}
.blue{
color: #000080;
}
</style>
</head>
<body>
<h1>This is example</h1>
<p>This is example</p>
<div>Some important message </div>
<button id="btn1">Add class </button>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
