❮❮ PREV NEXT ❯❯

HTML METHODS - outerWidth()

The outerWidth() method in JQuery is used to get the width(i.e. Padding and Border) of an HTML element.

Example :

<html>
  	<head>
    	<title> My First Programme </title>
    	
    	<script src = "https://cdnjs.cloudflare.com/ajax/libs/JQUERY/3.3.1/jquery.min.js"> </script>
  	</head>

  	<body>
    	<h1> JQuery </h1>
    	
    	<p style = "background-color:violet; height:100px; width: 150px; padding:15px; margin:10px; border:5px solid black;"> Hello World </p>
        
        <button> Click it </button> 
	  
      	<script>
      
			$('button').click( function() { 
            	alert("The outer width of the p element is : "+$('p').outerWidth());
            });
            
      	</script>
  	</body>
</html>

Output :

So, if we look at the above code, we have a <p> element.

<p style = "background-color:violet; height:100px; width: 150px; padding:15px; margin:10px; border:5px solid black;"> Hello World </p>

That has height 100px, width 150px, padding 15px, margin 10px and border 10px.

And on button click, the JQuery statement gets triggered,

$('button').click( function() {
	alert("The outer width of the p element is : "+$('p').outerWidth());
});

And an alert is generated,

alert("The outer width of the p element is : "+$('p').outerWidth());

Now, if we see the output (i.e. The alert),

You get the outer width of the <p> element (i.e. 190).

This is because the width of the element is 150px, padding is 15px and the border is 5px.

Just note that the outerWidth() method takes the width of the element and also the padding and border.

Now, if you see the above diagram, the width of the element is 150px and we will be taking the padding from the left(i.e. 15px) and from the right (i.e. 15px).

Also the border length is taken from left(i.e. 5px) and right(i.e. 5px).

i.e. 15px(Padding from the top) + 15px(Padding from the bottom) + 5px(Border from top) + 5px(Border from bottom) +100px(Height of the element)

i.e. 15px(Padding from the left) + 15px(Padding from the right) + 150px(Width of the element) + 5px(Border from left) + 5px(Border from right)

i.e. 190px

And thus the outer width of the element is 190px.

❮❮ PREV NEXT ❯❯