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() oder für Animationen durch die Verwendung von jQuery.animate() eingesetzt werden. Wollen Sie die Eigenschaften mehrerer gleichartiger Elemente manipulieren, eignet sich der Einsatz von jQuery.css() in Verbindung mit jQuery.each(). Wenn Sie jQuery in WordPress benutzen, ist die Integration von jQuery.css() nahtlos und erfordert keine zusätzlichen Abhängigkeiten.

Tipp

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

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

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:

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

In unserem jQuery-Tutorial können Sie Ihre jQuery-Kenntnisse bei Bedarf noch einmal auffrischen.

Tipp

Die IONOS 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:

<!DOCTYPE html>
<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>
</body>
</html>
jQuery

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

War dieser Artikel hilfreich?