Die JQuery- Bibliothek unterstützt fast alle Selektoren, die im Cascading Style Sheet (CSS) enthalten sind. Die Methode css() in JQuery wird verwendet, um die Stileigenschaft des ausgewählten Elements zu ändern. Das css() in JQuery kann auf verschiedene Arten verwendet werden.
css() Methode kann verwendet werden, um den aktuellen Wert der Eigenschaft für das ausgewählte Element zu überprüfen:

Syntax:

$(selector).css(property)

Rückgabewert: Gibt den Wert der Eigenschaft für das ausgewählte Element zurück. 

Beispiel 1:

Input: $("p").css("color");
Output: Output of the above input will return the 
rgb() value of the element.

Code Nr. 1:

HTML

<!DOCTYPE html>
 
<head>
    <script src="https://ajax.googleapis.com/ajax/libs
                 /jquery/3.3.1/jquery.min.js">
         
        // this is the link of JQuery CDN direct from the
        // jquery website so that we can use all the
        //function of JQuery css()
    </script>
</head>
 
<body>
    <button>Click here and it will return the color value
            of p element</button>
    <p style="color:green">Wecome to gfg!</p>
 
</body>
<script>
    $(document).ready(function() {
         
        //here selecting button element
        $("button").click(function() {
             
            // here when the button is clicked css() method
            // will return the value using alert method
            alert($("p").css("color"));
        });
    });
</script>
 
</html>

Ausgabe: 
Vor dem Klicken auf die Schaltfläche-

Nach dem Klicken auf die Schaltfläche-

css()-Methode, die auch zum Hinzufügen oder Ändern der Eigenschaft für das ausgewählte Element verwendet wird. 

Syntax:

$(selector).css(property, value)

Rückgabewert: Dies ändert den Wert der Eigenschaft für das ausgewählte Element. 

Beispiel 2:

Input: $("p").css("color", "red");
Output: Output of the "p" element becomes red 
whatever may be the color previously.

Code Nr. 2:

HTML

<!DOCTYPE html>
 
<head>
    <script src="https://ajax.googleapis.com/ajax/libs
                 /jquery/3.3.1/jquery.min.js">
                  
        // this is the link of JQuery CDN direct from
        // the jquery website so that we can use all
        // the function of JQuery css()
    </script>
</head>
 
<body>
    <button>Click here and it will return the color value
            of p element</button>
    <p style="border: 2px solid green;color:red;padding:5px">
              Wecome to gfg!.</p>
 
</body>
<script>
    $(document).ready(function() {
         
        // here selecting button element
        $("button").click(function() {
             
            // here when the button is clicked css()
            // method will change the color of paragraph
            $("p").css("color", "green");
        });
    });
</script>
 
</html>

Ausgabe: 
Vor dem Klicken auf die Schaltfläche-

Nach dem Klicken auf die Schaltfläche-

Die Methode css() kann die Funktion verwenden, um die CSS-Eigenschaft für das ausgewählte Element zu ändern: 

Syntax:

$(selector).css(property, function(index, currentvalue))

Rückgabewert: Es wird mit dem geänderten Wert für die ausgewählte Eigenschaft zurückgegeben. 

Beispiel 3:

Input: $("p").css("padding", function(i){ return i+20;});
Output: Output will get is the paragraph with padding value
 increases to "25px" whatever be the initial value.

Code Nr. 3:

HTML

<!DOCTYPE html>
 
<head>
    <script src="https://ajax.googleapis.com/ajax/libs
                 /jquery/3.3.1/jquery.min.js">
                  
        //this is the link of JQuery CDN direct from
        //the jquery website so that we can use all
        //the function of JQuery css()
    </script>
</head>
 
<body>
    <button>Click here and the padding will change.</button>
    <p style="border: 2px solid green;color:green;padding=5px;">
              Welcome to gfg!.</p>
 
</body>
<script>
    $(document).ready(function() {
        $("button").click(function() {
            $("p").css("padding", function(h) {
                return h + 30;
            });
        });
    });
</script>
 
</html>

Ausgabe: 
Vor dem Klicken auf die Schaltfläche-

Nach dem Klicken auf die Schaltfläche-

Mit Hilfe der CSS-Methode können wir in JQuery auch mehr als eine Eigenschaft gleichzeitig anwenden.

Hinweis: In dieser Methode schreiben wir den Eigenschaftsnamen in camelCase.

Syntax:

$(selector).css({property:value, property:value, ...})

Code Nr. 4:

HTML

<!DOCTYPE html>
<html>
<head>
  <title>Document</title>
</head>
 
<body> 
    <p style="border: 2px solid green;color:green;padding=5px;">
            Welcome to gfg!.</p>
 
  <button>Apply css</button>
  <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
   </script>
  <script>
    $("button").click(function(){
      //applying more than one property at a time
      //Note : property name written in camelCase
        $("p").css({"backgroundColor":"green",
                "color":"white","fontSize":"20px"});
    });
     
</script>
</body> 
</html>

Ausgabe:

Bevor Sie auf die Schaltfläche klicken-

Nach dem Klicken auf die Schaltfläche-