One or more styles can be added to the HTML elements by using the jQuery css() method. Even we can create some custom CSS classes with the required styles that we want to add and add that class by using the addClass() method. In this article, we will see the two ways of adding one or more style properties.
css() method: The css() method is used to change the style property of the selected element. The css() in JQuery can be used in different ways.
Syntax:
For single style:
$('selector').css('property':'value');
For multiple styles:
$('selector').css({
'property1': 'value1',
'property2': 'value2'
});
Example 1: In this example, we are using the above-explained method.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<script src=
integrity=
"sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous">
</script>
<style>
h1 {
color: #006600;
}
button {
color: white;
background-color: #006600;
width: auto;
height: 30px;
margin-top: 5px;
}
body {
text-align: center;
}
p {
font-size: 60px;
}
div {
margin: 5px;
height: auto;
width: auto;
position: relative;
text-align: center;
display: flex;
justify-content: center;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<button id="CSS">Click to see effect</button>
<br />
<div id="GFG">
jQuery is one of the powerful libraries
<br /> of javascript which has many
powerful<br /> methods that make the
manipulation of<br /> DOM much simpler
using the selectors and<br /> makes the
interaction with DOM much easier.
</div>
<script>
$(document).ready(function() {
$("#CSS").click(function() {
$("#GFG").css({
"font-style": "italic",
"font-family":
"Courier New, Courier, monospace",
"background-color": "lime",
"font-weight": "bold",
color: "#006600",
});
});
});
</script>
</body>
</html>
|
Output:
css() method
Using addClass() method: The addClass() method is used to add the classes to the particular element. We can add some CSS properties to the added classes.
Syntax:
For single class:
$('selector').addClass('class_name');
For multiple classes:
$('selector').addClass('class_name1 class_name2');
Example: In this example, we are using the above method.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible"
content="IE=edge" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<script src=
integrity=
"sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous">
</script>
<style>
h1 {
color: #006600;
}
button {
color: white;
background-color: #006600;
width: auto;
height: 30px;
margin-top: 5px;
}
body {
text-align: center;
}
div {
margin: 5px;
height: auto;
width: auto;
position: relative;
text-align: center;
display: flex;
justify-content: center;
}
.new_class {
font-style: italic;
font-family: Courier New, Courier, monospace;
background-color: grey;
font-weight: bold;
color: #006600;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<p><b>jQuery addClass() method</b></p>
<button id="CSS">Click to add class</button>
<br />
<div id="GFG">
jQuery is one of the powerful libraries
<br /> of javascript which has many
powerful<br /> methods that make the
manipulation of<br /> DOM much simpler
using the selectors and<br /> makes the
interaction with DOM much easier.
</div>
<script>
$(document).ready(function () {
$("#CSS").click(function () {
$("#GFG").addClass("new_class");
});
});
</script>
</body>
</html>
|
Output:
addClass() method
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
24 May, 2023
Like Article
Save Article