Open In App

jQuery width() Method

Last Updated : 10 Jul, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

The width() is an inbuilt function in JavaScript which is used to check the width of an element. It does not check the padding, border, and margin of the element.

Syntax:

$("param").width()

Parameters: Here parameter is “param” which is the class or id of the element whose width is to be extracted.

Return values: It returns the width of the selected element.

jQuery code to show the working of this function:

Example 1:

html




<!DOCTYPE html>
<html>
 
<head>
    <script src=
    </script>
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                let msg = "";
                msg += "Width of div: " + $("#demo").width();
                $("#demo").html(msg);
            });
        });
    </script>
    <style>
        #demo {
            height: 150px;
            width: 350px;
            padding: 10px;
            margin: 3px;
            border: 1px solid blue;
            background-color: lightgreen;
        }
    </style>
</head>
 
<body>
    <div id="demo"></div>
    <button>Click Me!!!</button>
    <p>Click on the button and check
        the width of the element
        (excluding padding).
    </p>
</body>
 
</html>


Output:

jquery-44

jQuery also includes innerWidth() method i.e, it is also used to check the inner width of the element including padding.

Syntax:

$("param").innerWidth()

Parameters: Here parameter “param” is the class or id of the element whose width to be extracted.

Return value: It returns the width of the selected element.

Example 2:

html




<!DOCTYPE html>
<html>
 
<head>
                jquery/3.3.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                let msg = "";
                msg += "Inner width of div: " + $("#demo")
                    .innerWidth() + "</br>";
                $("#demo").html(msg);
            });
        });
    </script>
</head>
<style>
    #demo {
        height: 150px;
        width: 350px;
        padding: 10px;
        margin: 3px;
        border: 1px solid blue;
        background-color: lightgreen;
    }
</style>
 
<body>
    <div id="demo"></div>
    <button>Click Me!!!</button>
    <p>Click on the button and check
        the innerWidth of an element
        (includes padding).
    </p>
</body>
 
</html>


Output:

jquery-45



Previous Article
Next Article

Similar Reads

Difference Between css(‘width’) and width() methods In jQuery
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 o
3 min read
HTML width/height Attribute vs CSS width/height Property
In HTML 5, few elements follow the width and height attributes and maximum elements do not follow this attribute. Like img, iframe, canvas, and svg kind of elements follow the width and height attributes but div, span, article and section type of elements don't follow them.The width and height attributes are affected in img, svg tags, those are wea
3 min read
How to add Background-Color for Text Width Instead of Entire Element Width using CSS ?
In this article, we will see how to add background color for the text width instead of the entire element width using CSS. The display: inline or display: inline-block property is used to set the background color of the text width. Syntax: display: inline; display: inline-block; Approach: We will create an element and then apply the display: inline
2 min read
How to make a grid with two columns where 1st column has 20% of width and 2nd one 80% width in Tailwind CSS ?
Tailwind CSS simplifies the process of making complex UI designs. It has a lot of predefined styles in form of classes, which can be applied to any HTML element in the code. Also, one advantage of Tailwind CSS is that during the production build, it analyzes the HTML components, and removes any unused CSS, hence decreasing the overall size of the C
4 min read
What is the difference between 'width: 100%' and 'width: 100vw' in CSS ?
The CSS width Property is used to set the width of the text and images. The width can be assigned to the text and images in the form of pixels(px), percentages (%), centimeters (cm), etc. The width: 100% sets an element's width relative to its containing block, making it responsive within its parent. The width: 100% responds to the container's size
1 min read
jQuery UI Selectmenu width Option
jQuery UI consists of GUI widgets, visual effects, and themes implemented using HTML, CSS, and jQuery. jQuery UI is great for building UI interfaces for the webpages. The jQuery UI Selectmenu width option is used to set the width of the options menu in pixels. If the width value is set to null, the width of the native select is used. Syntax: $( ".s
1 min read
How to animate div width and height on mouse hover using jQuery ?
In order to animate the div width and height on mouse hover, we can use the jQuery animate() method along with the mouseenter() and mouseleave() methods. .animate() method: The animate() method changes the state of the element with CSS style. Syntax: $(selector).animate({styles}, para1, para2, para3); .mouseenter() method: The mouseenter() method w
3 min read
How to get the width of hidden element in jQuery ?
An HTML element can be hidden with the help of .hide() jQuery function or we can hide easily by making visibility equals hidden in CSS. We can easily find the width of this hidden element in jQuery. There are two kinds of width that are defined with the every HTML element i.e, innerWidth and the outerWidth of the element: innerWidth: This width is
2 min read
How to dynamically set the height and width of a div element using jQuery ?
Set the height of a div element using jQuery The content height of a div can dynamically set or change using height(), innerHeight(), and outerHeight() methods depending upon the user requirement. If the user wants to change the content height of a div dynamically, it includes changing the actual height, actual height with padding, and actual heigh
7 min read
How to create a full width slider without input area using jQuery Mobile ?
jQuery Mobile is a web-based technology used to make responsive content that can be accessed on all smartphones, tablets and desktops. In this article, we will be creating a full-width slider without an input area using jQuery Mobile. Approach: Add jQuery mobile scripts needed for your project. &lt;link rel=”stylesheet” href=”http://code.jquery.com
1 min read