What is the use of css() method in jQuery?
css() in jQuery What is the use of method?
jQuery contains various methods, of which CSS() is one of them. The CSS() method is used to get the value of a specific CSS property applied to a specific HTML element. Additionally, it is used to set CSS properties and their values for a specific HTML element. Developers can also use the CSS() method to update CSS property values.
In this tutorial, we’ll learn how to use the jQuery’s css() method to access and set CSS properties on specific HTML elements.
Syntax
You can use the jQuery css() method using the following syntax.
Var value = <span class="katex math inline">('element').css(property);</span>('element').css(property, value);
<span class="katex math inline">('element').css(property, function() {
return value;
});</span>('element').css({property1: value1, property2: value2, ...});
The css() method accepts one or two parameters. Here, ‘property’ is the name of the CSS property whose value you want to access or set. You can also use an object containing key-value pairs for multiple CSS properties.
Example 1
In the following example, we set the background color of the div element. When the user clicks the button, the callback function uses jQuery’s CSS() method to access the value of the div element’s ‘background-color’ property.
In the output, the user can observe that the div element’s background color is displayed as an RGB value 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 JQuery CSS() method to access the background-color value</h2>
<div class = "text">This is an example div element.</div>
<h3>Click the button below to get the background color of the div element above. </h3>
<button id = "btn">Click Me</button>
<div id = "output"></div>
<script>
<span class="katex math inline">('#btn').click(function () {
var color = </span>('.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 following example, we use the css() method to set the background color of a div element. Here, when the user clicks the button, the callback function uses its class name and accesses the div element using the css() method. We pass ‘background-color’ as the first argument, which is the property name, and ‘red’ as the second argument, which is the property value.
In the output, the user can observe that when they click the button, the background color of the div element changes to 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 JQuery CSS() method sets the background-color value</h2>
<div class = "text">This is an example div element.</div>
<h3>Click the button below to set the background color of the div element above to red.</h3>
<button id = "btn">Click me</button>
<script>
<span class="katex math inline">('#btn').click(function() {
var color =</span>('.text').css('background-color', 'red');
});
</script>
</body>
</html>
Example 3
In the following example, we use the css() method to change the padding of a div element with a random pixel value. Here, we pass ‘padding’ as the first argument to the css() method and a function as the second argument.
In the function, we use the Math.random() method to get a random number between 1 and 50 and return the random value to set as the fill of the HTML div element. In the output, the user can observe the random fill value.
<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>Use jQuery's CSS() method to get CSS property values from a callback function and set them</h2>
<div class = "text">Welcome to TutorialsPoint! </div>
<h3>Click the button below to set a custom padding for the div element above. </h3>
<button id = "btn">Click me</button>
<div id = "output"></div>
<script>
<span class="katex math inline">('#btn').click(function () {
var color =</span>('.text').css('padding', function () {
// Generate a random number between 0 and 50
var random = Math.floor(Math.random() * 50);
let padding = random + 'px';
let output = 'Padding value is:' + padding;
$('#output').text(output);
return padding;
});
});
</script>
</body>
</html>
Example 4
In the following example, we use CSS() The `css()` method sets multiple CSS properties for the accessed HTML element. Here, we pass an object as a parameter to the `css()` method. This object contains multiple CSS property-value pairs.
When the user clicks the button, it will apply all the CSS properties to the `div` element, which the user 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>Setting Multiple CSS Properties on an Element Using jQuery's <i>css() Method</i></h2>
<div class="text">Welcome to TutorialsPoint! </div>
<h3>Click the button below to set multiple CSS properties on the `div` element above. </h3>
<button id="btn"> Click me </button>
<div id="output"> </div>
<script>
<span class="katex math inline">('#btn').click(function() {
var color =</span>('.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 jQuery’s css() method. In the first example, we use the css() method to access CSS property values. In the second example, we set CSS properties to HTML elements. In the third example, we set the value returned by a function to a CSS property value. In the final example, we use the CSS() method to set multiple CSS property values to an HTML element.