Difference Between css(‘width’) and width() methods In jQuery

Last Updated : 06 Oct, 2021

In jQuery, we have two ways to change the width of any HTML element. The jQuery css() method and width() method, below both the methods are described properly with the example.

jQuery CSS(‘width’) Method: It is a method present in jQuery which is used to get or set the property on the matched element. It is a property used to get or set the width of any HTML element.

Syntax:

$('selector').css('width', 'value in px')

Parameters:

width: It is a property name, so it will be of string type.
value: It can be a string or a number.

In this way of changing the width, we always have to append “px” in the value.

Syntax:

To change the width, we have to provide value

$("#test").css("width", "200px")

To get the width, we don’t provide any value parameter. It returns the width of the selected element in px.

$("#test").css("width")

Example: In this code, we will print the default width value of the “h3” element, and then we will change the width to 200px. This demonstrates to get or set the width of an element using css(‘width’)

HTML

<!DOCTYPE html>
 
<head>
    <!-- jQuery library -->
    <script src=
"https://code.jquery.com/jquery-git.js">
    </script>
</head>
 
<body>
    <h3>GeeksforGeeks</h3>
    <script>
        // Getting "h3" element default width
        document.write("Width before change : " 
            + $("h3").css("width"));
        document.write("<br>");
 
        // Changing "h3"element width
        $("h3").css("width", "200px")
 
        // Now checking again width
        document.write("Width after change : "
            + $("h3").css("width"))
    </script>
</body>
 
</html>

Output:

css(“width”)

jQuery width() Method: This method is used to get the width of the current matched element or set the width of every matched element.

Syntax:

$('selector').width()

Parameter: It doesn’t accept any argument.
Return value: It returns the width of the first matched element.

Example:

$("#test").width()

To change the width of an element, use the following syntax

Syntax:

$('selector').width("value")

Parameter: It accepts a value as an argument which can be the type of string or number.

Example: In the width() method, we don’t need to append the word px in value.

$("#test").width("200")

Example: In this, we will do the same thing as the above code but with the width() method now.

HTML

<!DOCTYPE html>
 
<head>
    <!-- jQuery library -->
    <script src=
"https://code.jquery.com/jquery-git.js">
    </script>
</head>
 
<body>
    <h3>GeeksforGeeks</h3>
    <script>
        // Getting "h3" element default width
        document.write("Width before change : "
            + $("h3").width());
        document.write("<br>");
 
        // Changing "h3"element width
        $("h3").width("200")
 
        // Now checking again width
        document.write("Width after change : " 
            + $("h3").width());
    </script>
</body>
 
</html>

Output:

width()

In both ways, our output will be the same because both methods perform the same.

Difference Between css(‘width’) and width() methods in jQuery:

css(“width”)	width()
css() is a method and width is a property name.	It is one of the methods of jQuery dimension.
It is used to get or set the width of the matched element.	It is also used to get or set the width of the matched element.
In this, the return value is in the “px” value for the width of an element.	It just provides the value.
It returns the width of an element with px added to the value. For example – $(“h3”).css(“width”) will return 200px.	It returns the width value of the element.For example – $(“h3”).width() will return 200.