jQuery width() Method

Quiz

The width() method in jQuery is used to set or get the width of the first element in the set of matched elements. It does not include padding, borders, and margins.

When we use this method to get the width, it returns the width of the first matched element in the set. When it is used to set the width, it sets the width of all matched elements.

Syntax

We have different syntaxes to get and set the width of the selected elements −

Following is the syntax to get the width:

$(selector).width()

Following is the syntax to set the width:

$(selector).width(value)

Following is the syntax to set the width using a function:

$(selector).width(function(index, currentWidth))

Parameters

This method accepts the following parameters −

value: A numeric value representing the width. By default, the unit is âpxâ, but we can also specify the width in em, pt, etc.
function(index, currentWidth): This is an optional callback function.

index: The index position of the current element within the set of matched elements.
currentWidth: It specifies the current width of the element being processed within the loop. It provides the current width of the element in pixels.

Example 1

In the following example, we are using the width() method to get the width of a <div> element −

<html>
    <head>
        <script src = "https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <script>
            $(document).ready(function(){
                $("button").click(function(){
                    alert("Width of div: " + $("div").width())
                })
            })
        </script>
    </head>
    <body>
        <div style="width: 200px; height: 50px; border: 1px solid black; background-color: yellow;">
            This is a div element.
        </div>
        <button>Click</button>
    </body>
</html>

When we click the button, it gives an alert displaying the width of the selected

element as 200.

Example 2

In this example, we are setting the width of a <div> element using different units such as px, em, and pt −

<html>
<head>
<script src = "https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function(){
        $(".one").click(function(){
            $("div").width(200);
        })
        $(".two").click(function(){
            $("div").width("20em");
        })
        $(".three").click(function(){
            $("div").width("300pt");
        })
    });
</script>
</head>
<body>
    <div style="width: 150px; height: 50px; border: 1px solid black; background-color: yellow;">
        This is a div element.
    </div>
    <button class="one">Set width: 200px</button>
    <button class="two">Set width: 20em</button>
    <button class="three">Set width: 300pt</button>
    </body>
</html>

After clicking the buttons, the width of the

element will be changed as specified.

Example 3

Here, we are using the optional function parameter to increase the width of the <div> element −

<html>
<head>
<script src = "https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function(){
        $(".one").click(function(){
            $("div").width(function(index, currentWidth){
                return currentWidth + 100;
            });
        })
    });
</script>
</head>
<body>
    <div style="width: 150px; height: 30px; border: 1px solid black; background-color: yellow;">
        This is a div element.
    </div>
    <button class="one">Increase the width by 100px</button>
    </body>
</html>

For each click on the button, the width of the <div> will increase by 100 pixels.

jquery_ref_html.htm

Print Page