What is the use of the css() method in jQuery?-CSS Tutorial-php.cn

jQuery 中 css() 方法有什么用？

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, ...});

Copy after login

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.

    
  Using the  CSS() method  of JQuery to access the value of background-color
  This is a sample div element. 
  Click the below button to get the background color of the above div element.

Copy after login

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.

    
  Using the  CSS() method  of JQuery to set the value of background-color
  This is a sample div element. 
  Click the below button to set the red background color of the above div element.

Copy after login

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.

    
  Using the  CSS() method  of JQuery to get css property value from the callback function and set it
  Welcome to the TutorialsPoint! 
  Click the below button to set the custom padding for the above div element.

Copy after login

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.

   
  Using the  CSS() method  of JQuery to set multiple CSS properties to the element
  Welcome to the TutorialsPoint! 
 Click the below button to set multiple CSS properties to the above div element.

Copy after login

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!