Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
What is the use of css() method in jQuery?
Jquery contains various methods, and CSS() is one of them. The CSS() method is used to get the value of the particular css property applied to the particular HTML element. Furthermore, it is also used to set the CSS property with its value for the particular HTML element. Developers can also update the CSS property value using the CSS() method.
In this tutorial, we will learn to use Jquery's css() method to access and set the CSS property for the particular HTML element.
Syntax
Users can follow the syntax below to use Jquery's css() method.
Var value = $('element').css(property);
$('element').css(property, value);
$('element').css(property, function() {
return value;
});
$('element').css({property1: value1, property2: value2, ...});
The css() method takes one or two parameters. Here, the ‘property’ is the CSS property name to access or set its value. Also, it takes objects containing multiple key-value pairs of CSS property.
Example 1
In the example below, we have set the background color for the div element. When a user clicks on the button, the callback function uses the CSS() method of Jquery to access the ‘background-color’ property value of the div element.
In the output, users can observe the background color of the div element in the RGB values after clicking the button.
<html>
<head>
<style>
.text {
background-color: rgb(88, 236, 236);
}
</style>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"> </script>
</head>
<body>
<h2>Using the <i> CSS() method </i> of JQuery to access the value of background-color</h2>
<div class = "text"> This is a sample div element. </div>
<h3> Click the below button to get the background color of the above div element. </h3>
<button id = "btn"> Click Me </button>
<div id = "output"> </div>
<script>
$('#btn').click(function () {
var color = $('.text').css('background-color');
let output = document.getElementById('output');
output.innerHTML = "The background color of the div element is " + color;
});
</script>
</body>
</html>
Example 2
In the example below, we use the css() method to set the background color for the div element. Here, when users click the button, the callback function accesses the div element using its class name and the css() method. We have passed the ‘background-color’ as the first parameter, property name, and ‘red’ as a second parameter, property value.
In the output, users can observe that when they click the button, the background color of the div element becomes red.
<html>
<head>
<style>
.text {
background-color: rgb(31, 219, 163);
}
</style>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"> </script>
</head>
<body>
<h2>Using the <i> CSS() method </i> of JQuery to set the value of background-color</h2>
<div class = "text"> This is a sample div element. </div>
<h3> Click the below button to set the red background color of the above div element. </h3>
<button id = "btn"> Click Me </button>
<script>
$('#btn').click(function () {
var color = $('.text').css('background-color', 'red');
});
</script>
</body>
</html>
Example 3
In the example below, we change the padding of the div element with random pixel values. Here, we have used the ‘padding’ as the first parameter of the css() method and function as a second parameter of the css() method.
In the function, we use the Math.random() method to get random numbers between 1 and 50, and we return the random value to set it as padding of the HTML div element. In the output, users can observe the random padding values.
<html>
<head>
<style>
.text {
background-color: rgb(31, 219, 163);
}
</style>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"> </script>
</head>
<body>
<h2>Using the <i> CSS() method </i> of JQuery to get css property value from the callback function and set it</h2>
<div class = "text"> Welcome to the TutorialsPoint! </div>
<h3> Click the below button to set the custom padding for the above div element. </h3>
<button id = "btn"> Click Me </button>
<div id = "output"> </div>
<script>
$('#btn').click(function () {
var color = $('.text').css('padding', function () {
// generate a random number between 0 to 50
var random = Math.floor(Math.random() * 50);
let padding = random + 'px';
let output = 'The padding value is: ' + padding;
$('#output').text(output);
return padding;
});
});
</script>
</body>
</html>
Example 4
In the example below, we have used the CSS() method to set the multiple CSS properties to the accessed HTML element. Here, we have passed the object as a CSS() method parameter. The object contains multiple CSS property-value pairs.
When users click the button, it applies all CSS properties to the div element, which users can see in the output.
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"> </script>
</head>
<body>
<h2>Using the <i> CSS() method </i> of JQuery to set multiple CSS properties to the element</h2>
<div class = "text"> Welcome to the TutorialsPoint! </div>
<h3>Click the below button to set multiple CSS properties to the above div element.</h3>
<button id = "btn"> Click Me </button>
<div id = "output"> </div>
<script>
$('#btn').click(function () {
var color = $('.text').css({
'color': 'red',
'background-color': 'blue',
'font-size': '20px',
'border': '2px solid green',
"width": "500px",
"height": "50px",
});
});
</script>
</body>
</html>
Developers learn to use the css() method of Jquery. In the first example, we have used the css() method to access CSS property value. In the second example, we have set the CSS property to the HTML element.
In the third example, we set the value returned from the function as a CSS property value. In the last example, we set the multiple CSS property values to the HTML element using the CSS() method.
210 Views
