Home >Web Front-end >CSS Tutorial >What is the use of the css() method in jQuery?
What is the use of the css() method in jQuery?
- WBOYforward
- 2023-09-06 15:17:021373browse
Jquery contains various methods, one of which is CSS(). 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 specific HTML elements. Developers can also use the CSS() method to update CSS property values.
In this tutorial, we will learn to use Jquery’s css() method to access and set CSS properties of specific HTML elements.
grammar
Users can use the Jquery css() method according to the following syntax.
Var value = $('element').css(property);
$('element').css(property, value);
$('element').css(property, function() {
return value;
});
$('element').css({property1: value1, property2: value2, ...});
css() method accepts one or two parameters. Here, 'property' is the name of the CSS property whose value you want to access or set. Additionally, it accepts objects containing multiple CSS property key-value pairs.
Example 1
In the example below, we set the background color for the div element. When the user clicks the button, the callback function uses Jquery's CSS() method to access the 'background-color' attribute value of the div element.
In the output, the user can observe the background color of the div element in 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 following example, we use the css() method to set the background color for the div element. Here, when the user clicks on the button, the callback function accesses the div element using its class name and css() method. We pass 'background-color' as the first parameter, the attribute name, and 'red' as the second parameter, the attribute value.
In the output, the user can observe that when the button is clicked, 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 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 a div element using random pixel values. Here, we are using 'padding' as the first parameter of the css() method and the function as the second parameter of the css() method.
In this 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 padding of the HTML div element. In the output, the user can observe 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>
The Chinese translation of Example 4
is:Example 4
In the following example, we use the CSS() method to set multiple CSS properties to the accessed HTML elements. Here, we pass the object as parameter of CSS() method. This object contains multiple CSS property-value pairs.
When the user clicks the button, it applies all 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>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 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 the function to the CSS property value. In the last example, we use the CSS() method to set multiple CSS property values to HTML elements.
The above is the detailed content of What is the use of the css() method in jQuery?. For more information, please follow other related articles on the PHP Chinese website!