Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to apply CSS style using jQuery?
We can use jQuery's .css() method to apply CSS styles to HTML elements dynamically. jQuery is a JavaScript library that simplifies DOM manipulation and allows us to add interactivity and modify CSS styles of elements programmatically.
Syntax
$(selector).css(property, value)
OR
$(selector).css({ property: value, property: value, ... })
The jQuery css() method accepts either a single property-value pair as separate arguments, or an object containing multiple CSS properties and their values.
Note: To run these examples, you need to include the jQuery library in your HTML file using a CDN link or local file.
Example 1: Single CSS Property
In this example, we will change the text color of a paragraph element when a button is clicked
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<title>Apply Single CSS Property</title>
</head>
<body>
<p>This is a paragraph with default styling.</p>
<button id="colorBtn">Change Text Color</button>
<script>
$(document).ready(function() {
$('#colorBtn').click(function() {
$('p').css('color', 'red');
});
});
</script>
</body>
</html>
Initially shows black text. When the button is clicked, the paragraph text changes to red color.
Example 2: Multiple CSS Properties
In this example, we will apply multiple CSS properties simultaneously using an object notation
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<title>Apply Multiple CSS Properties</title>
</head>
<body>
<p>This paragraph will be styled with multiple properties.</p>
<button id="styleBtn">Apply Multiple Styles</button>
<script>
$(document).ready(function() {
$('#styleBtn').click(function() {
$('p').css({
'color': 'white',
'background-color': 'navy',
'padding': '15px',
'border-radius': '5px',
'font-weight': 'bold'
});
});
});
</script>
</body>
</html>
Initially shows default paragraph styling. When clicked, the paragraph gets white text, navy background, 15px padding, rounded corners, and bold font weight.
Example 3: Getting CSS Property Values
You can also use the css() method to retrieve current CSS property values
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<title>Get CSS Property Value</title>
<style>
.styled-div {
width: 200px;
height: 100px;
background-color: lightblue;
margin: 10px;
}
</style>
</head>
<body>
<div class="styled-div">Styled Div</div>
<button id="getBtn">Get Background Color</button>
<p id="output"></p>
<script>
$(document).ready(function() {
$('#getBtn').click(function() {
var bgColor = $('.styled-div').css('background-color');
$('#output').text('Background color is: ' + bgColor);
});
});
</script>
</body>
</html>
Shows a light blue div. When the button is clicked, it displays the background color value below the button.
Conclusion
The jQuery css() method provides an easy way to dynamically modify CSS styles. Use single property-value pairs for individual changes or object notation for multiple properties simultaneously. This method is essential for creating interactive web applications with dynamic styling.
7K+ Views
