# jQuery.css() – CSS-Stilelemente manipulieren

Mit jQuery.css() passen Sie **CSS-Stileigenschaften** direkt über JavaScript an, ohne umständlichen DOM-Zugriff oder detaillierte CSS-Selektoren verwenden zu müssen. Die vereinfachte Handhabung begünstigt daher schnelle und präzise Änderungen am Design Ihrer Website.

## Was ist die jQuery.css()-Methode?

Mit der jQuery.css()-Methode können Sie den **Wert einer bestimmten CSS-Eigenschaft** abrufen oder ändern. Die Funktion kann auch bei Events mit [jQuery.on()](https://www.ionos.de/digitalguide/websites/web-entwicklung/jquery-on/) oder für Animationen durch die Verwendung von [jQuery.animate()](https://www.ionos.de/digitalguide/websites/web-entwicklung/jquery-animate/) eingesetzt werden. Wollen Sie die Eigenschaften mehrerer gleichartiger Elemente manipulieren, eignet sich der Einsatz von jQuery.css() in Verbindung mit [jQuery.each()](https://www.ionos.de/digitalguide/websites/web-entwicklung/jquery-each/). Wenn Sie [jQuery in WordPress](https://www.ionos.de/digitalguide/hosting/blogs/wordpress-jquery/) benutzen, ist die Integration von jQuery.css() nahtlos und erfordert keine zusätzlichen Abhängigkeiten.

Tipp [Webspace](https://www.ionos.de/hosting/webspace "Webspace mieten bei IONOS") von IONOS bietet skalierbare Lösungen, mit denen Sie Ihre Ressourcen nach Bedarf auswählen können. Die stabile Infrastruktur sorgt dafür, dass Ihre Website stets online und für Besucher und Besucherinnen erreichbar ist. Sie können Ihr Hosting-Paket zudem flexibel erweitern, um mit dem Wachstum Ihres Unternehmens Schritt zu halten.

## Wie sieht die Syntax der jQuery.css()-Methode aus?

Die Syntax von jQuery.css() hat folgende Form:

```jQuery
$(selector).css(property, value);
```

Mit dem Parameter `property` gibt man die CSS-Eigenschaft an, deren Wert abgerufen werden soll, `value` ist der neue Wert in numerischer Form oder als Zeichenkette.

Es ist auch möglich, mehrere CSS-Eigenschaften gleichzeitig zu erfassen oder zu manipulieren, indem man ein Objekt mit **Eigenschaft-Wert-Paaren** übergibt:

```jQuery
$(selector).css({property1: value1, property2: value2, ...});
```

In unserem [jQuery-Tutorial](https://www.ionos.de/digitalguide/websites/web-entwicklung/jquery-tutorial-einbindung-und-erste-schritte/ "jQuery-Tutorial – alle Grundlagen zu Selektoren und Syntax") können Sie Ihre jQuery-Kenntnisse bei Bedarf noch einmal auffrischen.

Tipp Die [IONOS API](https://developer.hosting.ionos.de "IONOS Entwickler API") ist praktisch für die Automatisierung von Aufgaben und Prozessen. Sie können IONOS-Dienste programmgesteuert verwalten, Ressourcen erstellen und konfigurieren, ohne manuelle Eingriffe vornehmen zu müssen. Dies spart Ihnen Zeit und reduziert menschliche Fehler.

## Ein Beispiel für die Anwendung von jQuery.css()

Im Folgenden wollen wir Ihnen den konkreten Einsatz von jQuery.css() anhand eines Beispiels veranschaulichen:

```jQuery

<html>
<head>
    <title>jQuery.css() example</title>
    <style>
        .myElement {
            width: 200px;
            height: 100px;
            background-color: blue;
            color: white;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div class="myElement">This is an example text</div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $(".myElement").css("background-color", "red");
            $(".myElement").css("color", "green");
            var fontSize = $(".myElement").css("font-size");
            console.log("Font-Size:", fontSize);
        });
    </script>
<div class="hash d-none" hidden>hash_488e88601edd17da772601dc4bf484a49f9f9b19</div><script data-shy-copy-guard>(function(){var C=[0x00AD,0x200B,0x200C,0x200D,0x2060,0xFEFF];var s=function(t){for(var i=0;i<C.length;i++){t=t.split(String.fromCharCode(C[i])).join("");}return t;};document.addEventListener("copy",function(e){var sel=document.getSelection();if(!sel||sel.isCollapsed||!e.clipboardData){return;}e.clipboardData.setData("text/plain",s(sel.toString()));try{var d=document.createElement("div");d.appendChild(sel.getRangeAt(0).cloneContents());e.clipboardData.setData("text/html",s(d.innerHTML));}catch(x){}e.preventDefault();});})();</script></body>
</html>
```

In diesem Beispiel haben wir ein HTML-Element mit der Klasse `myElement`, das ursprünglich einen blauen Hintergrund, weißen Text und eine Schriftgröße von 20 Pixeln besitzt. Mit jQuery.css() ändern wir die Hintergrundfarbe des Elements auf Rot (`$(".myElement").css("background-color", "red");`) und die Schriftfarbe auf Grün (`$(".myElement").css("color", "green");`). Darüber hinaus verwenden wir die Methode `$(".myElement").css("font-size")`, um die aktuelle Schriftgröße des Elements abzurufen und sie auf der Konsole auszugeben.

Auf dieselbe Weise können Sie eine Vielzahl von CSS-Stileigenschaften manipulieren und so das Erscheinungsbild Ihrer Website dynamisch ändern.

Tipp Mit [Deploy Now](https://www.ionos.de/hosting/deploy-now "Automatische Deployments mit IONOS") von IONOS für statische Webseiten und Single-Page-Applikationen profitieren Sie von einer benutzerfreundlichen Oberfläche und einem automatischen Deployment. Durch das schnelle Setup können Sie Ihre Anwendung bequem einrichten, ohne sich mit komplexen Konfigurationsschritten auseinandersetzen zu müssen.


This is a markdown version of: [https://www.ionos.de/digitalguide/websites/web-entwicklung/jquery-css/](https://www.ionos.de/digitalguide/websites/web-entwicklung/jquery-css/) for AI/LLM consumption.