Introduction:

In this article we will learn how to get outer Width of html elements or how to use outerWidth() method in jQuery with example.

Description:

jQuery outerWidth() method is used to return the outer width of the first matched

html element with padding and border.

The jQuery outerWidth() method works for both visible and hidden html elements.

Example of jQuery outerWidth() method

Let's take an example to demonstrate the effect of jQueryouterWidth() method.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Jquery Tutorials</title>
    <script src="Scripts/jquery-1.8.2.min.js"></script>
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                $('p').text("Outer width of div is: " + $("div").outerWidth());
            });
        });
    </script>
 
</head>
<body>    
    <div style="height:100px;width:300px;padding:10px;margin:3px;
     border:1px solid blue;background-color:lightpink;"></div><br>
    <button>Click here to get the outer width of the div</button>  <br />
    <p></p>
</body>
</html>

Above code snippet when you click on button than “div” outerwidth show in “p” tag.

Output:


I hope it will help to you.

 

 

0 comments


Leave a comment

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

Welcome to SQL Tutorials Point

Don't have an account? Click here to Create a new account, it takes less than a minute.