How to change CSS style elements in jQuery.css()

jQuery.css() allows you to adjust CSS style properties directly via JavaScript without having to use DOM access or detailed CSS selectors. This simpler method means you can perform fast and precise changes to your website’s design.

What is the jQuery.css() method?

The jQuery.css() method can be used to retrieve or change the value of a specific CSS property. The function can also be used for events with jQuery.on() or for animations by using jQuery.animate(). If you want to alter the properties of multiple similar elements, using jQuery.css() in conjunction with jQuery.each() is ideal. If you use jQuery in WordPress, the integration of jQuery.css() is seamless and doesn’t require additional dependencies.

Tip

Webspace from IONOS offers scalable solutions that allow you to choose your resources as needed. The stable infrastructure ensures that your website is always online and accessible for visitors. You can also flexibly expand your hosting package to keep up with the growth of your business.

What is the syntax for the jQuery.css() method?

The syntax for jQuery.css()looks like this:

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

The property parameter is used to specify the CSS property whose value is to be retrieved, value is the new value in numeric form or as a string.

It is also possible to grab or manipulate multiple CSS properties at the same time by passing an object with property-value pairs:

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

In our jQuery tutorial you can brush up your jQuery knowledge again if needed.

Tip

The IONOS API is handy for automating tasks and processes. You can manage IONOS services, and create and configure resources without manual intervention. This saves on time and reduces human error.

An example of jQuery.css() in use

Here’s a concrete example of how jQuery.css() can be used:

<!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 this example, we have an HTML element with the class myElement that originally has a blue background, white text, and a font size of 20 pixels. Using jQuery.css(), we’ve changed the background colour of the element to red ($(".myElement").css("background-color", "red");) and the font colour to green ($(".myElement").css("color", "green");). In addition, we’ve used the $(".myElement").css("font-size") method to retrieve the current font size of the element and output it to the console.

In the same way, you can manipulate a variety of CSS style properties to dynamically change the appearance of your website.

Tip

Deploy Now from IONOS is available for static websites and single-page applications, and you can benefit from a user-friendly interface and automatic deployment. The fast setup allows you to set up your application without having the hassle of a complex configuration.

Was this article helpful?