Heim >Web-Frontend >CSS-Tutorial >Wozu dient die Methode css() in jQuery?
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.
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.
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>
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>
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
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!