Introduction:

In this article we will explain how to set css style of selected html elements using jQuery or What is css()method in jQuery or why use css() method in jQuery with example. 

Description:

The jQuery CSS() method is used to get or set style properties or values for selected html elements.

Let’s see, Example of jQuery css() method to get property Value:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Example of jQuery css method</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#txtbgcolor').val($("#content").css("background-color"));
        });
    </script>
</head>
<body>
    <div id="content" style="background-color:#9ad506; width:300px;">
        SQL Tutorials point provide free service to share information
    </div>
    <div style="margin-top:10px;">
        background-Color: <input id="txtbgcolor" type="text" />
    </div>
 
</body>
</html>


Let’s see, Example of jQuery css() method to set property Value:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Example of jQuery css method</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#content").css("background-color", "#9ad506")
            $("#content1").css("background-color", "#05a32f")
        });
    </script>
</head>
<body>
    <div id="content" style="width:300px;">
        SQL Tutorials point provide free service to share information.
    </div>
 
    <div id="content1" style="width:300px; margin-top:10px;">
        SQL Tutorials point provide free service to share information.
    </div>
 
</body>
</html>


Set Multiple CSS Properties

To set multiple CSS properties, use the following syntax:

css({"propertyname":"value","propertyname":"value",...});

Example:

$("#content").css({"background-color": "#05a32f", "border":"2px solid #ccc"});



 Let's check live example

0 comments


Leave a comment

Make sure you enter the (*) required information where indicated. HTML code is not allowed.

You may also like