How to change CSS styles using jQuery

In this tutorial I will show you how to change a web page’s CSS (styles) using jQuery, the JavaScript Library. If you are a front end web developer you have likely run into a project where you need to modify the look of a web page at run-time. The jQuery.css() function can help you do just that. For a complete working example you can skip the reading and go right to the code.

Use CSS To Prompt A User

Let’s suppose we have a contact form somewhere on our site. Visitors can fill out their name, phone, email, and a message. When they submit the form we will be sent an email containing their information. We want to make the name and email required fields, and the others optional. While it is important that we do some checks on the server, it would also be nice to place some checks on the front end with JavaScript. We will create some simple conditions for the data to pass. If the requirements are not met we will prompt the user with some red colored text.

Contact Form HTML

For this example let’s start with our contact form’s HTML.

<form action="contact.php" method="post">
    Name: <input type="text" name="name" id="name" /><br />
    E-mail: <input type="text" name="email" id="email" /><br />
    Phone: <input type="text" name="phone" /><br />
    Message:<br />
    <textarea name="message"></textarea><br />
    <input type="submit" value="Send" id="submitForm" />
</form>

Notify The Visitor Of A Problem Using CSS And jQuery

Let’s now look ahead a little and imagine that a visitor omits some of the required data and tries to submit the form. We need a way to notify them that the data is required. We could have a container on the page that contains some instructions. When the visitor first opens the web page we don’t want the message to show yet, so we can hide the message text by setting the CSS “display” value to “none”. Let’s also set the CSS text color to red so it will stand out and clearly indicate a problem. Let’s use the following HTML and styling.

<div id="promptText" style="display:none;color:red;">Please enter a value in all required fields (marked with an asterisk).</div>

Validating The Information With JavaScript

Now we need to do some validation checks to make sure the visitor has entered information in the required fields. The JavaScript used from here on will include more than just the jQuery.css() function. We’ll take advantage of some other useful jQuery functions as well.

We want to perform our validation checks the moment our contact clicks the submit button. This will allow us to control whether or not we let the form submit, or cancel submitting so the visitor can make corrections. To do this we will add a click event handler on the submit button.

// Add a handler using the jQuery.click() function
$('#submitForm').click(function(){
    // some validation checks here...
});

Once a click event has been fired we will run our validation checks. We need to make sure that the visitor entered something in the “name” and “email” fields.

$('#submitForm').click(function(){
 
    // Use the jQuery.val() function to see if our fields are empty.
    if($('#name').val() == '' || $('#email').val() == ''){
        // We are missing some required information.  Tell the visitor.
        // ...
 
        // Cancel form submit by returning false.
        return false;
    }
    // The contact has entered the required information so let the form submit by returning true.
    return true;
});

Notifying The Visitor Of Errors Using CSS And jQuery

The last piece of code uses the jQuery.css() function to display our notification text. The text will tell the visitor that they are missing required information. After adding the css function our example code looks like this.

$('#submitForm').click(function(){
 
    // Use the jQuery.val() function to see if our fields are empty.
    if($('#name').val() == '' || $('#email').val() == ''){
        // We are missing some required information.
 
        // Prompt the user by showing our notification message by setting
        // the 'promptText' CSS display to an empty string.
        // We change the CSS with the jQuery.css() function
        $('#promptText').css('display', '');
 
        // Cancel form submit by returning false.
        return false;
    }
    // The contact has entered the required information so let the form submit by returning true.
    return true;
});

We’ve Changed The CSS Using jQuery.css Function

Hopefully this gives you an idea of how you can use the jQuery.css() function to read and modify element styles on a your web pages. You can read more about changing CSS styles using jQuery at jQuery.com.

Complete jQuery.css Example

Putting our stuff together we have a complete functional example.

<html>
<head>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('#submitForm').click(function(){
                // Use the jQuery.val() function to see if our fields are empty.
                if($('#name').val() == '' || $('#email').val() == ''){
                    // We are missing some required information.
 
                    // Prompt the user by showing our notification message by setting
                    // the 'promptText' CSS display to an empty string.
                    // We change the CSS with the jQuery.css() function
                    $('#promptText').css('display', '');
 
                    // Cancel form submit by returning false.
                    return false;
                }
                // The contact has entered the required information so let the form submit by returning true.
                return true;
            });
        });
    </script>
</head>
<body>
    <div id="promptText" style="display:none;color:red;">Please enter a value in all required fields (marked with an asterisk).</div>
    <form action="contact.php" method="post">
        Name: <input type="text" name="name" id="name" /><br />
        E-mail: <input type="text" name="email" id="email" /><br />
        Phone: <input type="text" name="phone" /><br />
        Message:<br />
        <textarea name="message"></textarea><br />
        <input type="submit" value="Send" id="submitForm" />
    </form>
</body>
</html>