Heim >Web-Frontend >CSS-Tutorial >Wozu dient die Methode css() in jQuery?

Wozu dient die Methode css() in jQuery?

WBOY
WBOYnach vorne
2023-09-06 15:17:021373Durchsuche

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

Jquery enthält verschiedene Methoden, eine davon ist CSS(). Die CSS()-Methode wird verwendet, um den Wert einer bestimmten CSS-Eigenschaft abzurufen, die auf ein bestimmtes HTML-Element angewendet wird. Darüber hinaus wird es verwendet, um CSS-Eigenschaften und deren Werte für bestimmte HTML-Elemente festzulegen. Entwickler können auch die CSS()-Methode verwenden, um CSS-Eigenschaftswerte zu aktualisieren.

In diesem Tutorial lernen wir, die css()-Methode von Jquery zu verwenden, um auf CSS-Eigenschaften eines bestimmten HTML-Elements zuzugreifen und diese festzulegen.

Grammatik

Benutzer können die JQuery-Methode css() gemäß der folgenden Syntax verwenden.

Var value = $('element').css(property);
$('element').css(property, value);
$('element').css(property, function() {
   return value;
});
$('element').css({property1: value1, property2: value2, ...});
Die Methode

css() akzeptiert einen oder zwei Parameter. „Eigenschaft“ ist hier der Name der CSS-Eigenschaft, auf deren Wert Sie zugreifen oder den Sie festlegen möchten. Darüber hinaus werden Objekte akzeptiert, die mehrere Schlüssel-Wert-Paare für CSS-Eigenschaften enthalten.

Beispiel 1

Im folgenden Beispiel legen wir die Hintergrundfarbe für das div-Element fest. Wenn der Benutzer auf die Schaltfläche klickt, verwendet die Rückruffunktion die CSS()-Methode von Jquery, um auf den Attributwert „background-color“ des div-Elements zuzugreifen.

In der Ausgabe kann der Benutzer die Hintergrundfarbe des div-Elements im RGB-Wert beobachten, nachdem er auf die Schaltfläche geklickt hat.

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

Beispiel 2

Im folgenden Beispiel verwenden wir die Methode css(), um die Hintergrundfarbe für ein div-Element festzulegen. Wenn der Benutzer hier auf die Schaltfläche klickt, greift die Callback-Funktion mithilfe ihres Klassennamens und der CSS()-Methode auf das div-Element zu. Wir übergeben „background-color“ als ersten Parameter, den Attributnamen, und „red“ als zweiten Parameter, den Attributwert.

In der Ausgabe kann der Benutzer beobachten, dass sich die Hintergrundfarbe des div-Elements in Rot ändert, wenn auf die Schaltfläche geklickt wird.

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

Beispiel 3

Im folgenden Beispiel ändern wir die Auffüllung eines div-Elements mithilfe zufälliger Pixelwerte. Hier verwenden wir „padding“ als ersten Parameter der css()-Methode und die Funktion als zweiten Parameter der css()-Methode.

In dieser Funktion verwenden wir die Methode Math.random(), um eine Zufallszahl zwischen 1 und 50 zu erhalten und den Zufallswert zurückzugeben, der als Auffüllung des HTML-div-Elements festgelegt wird. In der Ausgabe kann der Benutzer zufällige Füllwerte beobachten.

<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>
Die chinesische Übersetzung von

Beispiel 4

lautet:

Beispiel 4

Im folgenden Beispiel verwenden wir die Methode CSS(), um mehrere CSS-Eigenschaften für das aufgerufene HTML-Element festzulegen. Hier übergeben wir das Objekt als Parameter der CSS()-Methode. Dieses Objekt enthält mehrere CSS-Eigenschaft-Wert-Paare.

Wenn der Benutzer auf die Schaltfläche klickt, werden alle CSS-Eigenschaften auf das div-Element angewendet, was der Benutzer in der Ausgabe sehen kann.

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

Entwickler lernen, die css()-Methode von Jquery zu verwenden. Im ersten Beispiel verwenden wir die Methode css(), um auf CSS-Eigenschaftswerte zuzugreifen. Im zweiten Beispiel legen wir CSS-Eigenschaften für HTML-Elemente fest.

Im dritten Beispiel legen wir den von der Funktion zurückgegebenen Wert als CSS-Eigenschaftswert fest. Im letzten Beispiel verwenden wir die Methode CSS(), um mehrere CSS-Eigenschaftswerte für HTML-Elemente festzulegen.

Das obige ist der detaillierte Inhalt vonWozu dient die Methode css() in jQuery?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen