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

Table of Contents

grammar

Example 4

Home

Web Front-end

CSS Tutorial

What is the use of the css() method in jQuery?

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 06, 2023 pm 03:17 PM

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.

<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>

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.

<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>

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.

<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>

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.

<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>

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!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Best Graphic Settings

4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle Solution

2 weeks ago By DDD

R.E.P.O. How to Fix Audio if You Can't Hear Anyone

4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Chat Commands and How to Use Them

4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Where is the login entrance for gmail email?

7522

CakePHP Tutorial

1378

What is the format of the account name of steam

win11 activation key permanent

nyt connections hints and answers

Related knowledge

Working With GraphQL Caching Mar 19, 2025 am 09:36 AM

If you’ve recently started working with GraphQL, or reviewed its pros and cons, you’ve no doubt heard things like “GraphQL doesn’t support caching” or

Show, Don't Tell Mar 16, 2025 am 11:49 AM

How much time do you spend designing the content presentation for your websites? When you write a new blog post or create a new page, are you thinking about

Building an Ethereum app using Redwood.js and Fauna Mar 28, 2025 am 09:18 AM

With the recent climb of Bitcoin’s price over 20k $USD, and to it recently breaking 30k, I thought it’s worth taking a deep dive back into creating Ethereum

Creating Your Own Bragdoc With Eleventy Mar 18, 2025 am 11:23 AM

No matter what stage you’re at as a developer, the tasks we complete—whether big or small—make a huge impact in our personal and professional growth.

Vue 3 Apr 02, 2025 pm 06:32 PM

It's out! Congrats to the Vue team for getting it done, I know it was a massive effort and a long time coming. All new docs, as well.

A bit on ci/cd Apr 02, 2025 pm 06:21 PM

I'd say "website" fits better than "mobile app" but I like this framing from Max Lynch:

Let's use (X, X, X, X) for talking about specificity Mar 24, 2025 am 10:37 AM

I was just chatting with Eric Meyer the other day and I remembered an Eric Meyer story from my formative years. I wrote a blog post about CSS specificity, and

Can you get valid CSS property values from the browser? Apr 02, 2025 pm 06:17 PM

I had someone write in with this very legit question. Lea just blogged about how you can get valid CSS properties themselves from the browser. That's like this.

See all articles