HTML METHODS - innerWidth()

The innerWidth() method is used to get the width(i.e. Padding) 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 inner width of the p element is : "+$('p').innerWidth());
            });
            
      	</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, padding 15px, margin 10px and border 10px.

And on button click, the JQuery statement gets triggered,

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

And an alert is generated,

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

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

You get the inner width of the <p> element (i.e. 180).

This is because the width of the element is 150px. And the padding is 15px.

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

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).

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

i.e. 180px

And thus the inner width of the element is 180px.

❮❮ PREV NEXT ❯❯