How to use innerwidth() Method in JQuery

In this article, I will explain use of innerwidth() Method in JQuery.
  • 1866

JQuery CSS innerwidth() Method

  • innerwidth( ) method gets the inner width for the first matched element.

  • innerwidth( ) method return width with include the border and the padding.

Syntax

$(selector).innerwidth()

Example

The following example shows how to innerwidth() method in jquery.

<html>

<head>

<title>the title</title>

   <script type="text/javascript"

   src="JScript.js"></script>

   <script type="text/javascript" language="javascript">

 

       $(document).ready(function () {

 

           $("div").click(function () {

               var color = $(this).css("background-color");

               var width = $(this).innerWidth();

               $("#result").html("Inner Width is <span>" +

                         width + "</span>.");

               $("#result").css({ 'color': color,

                   'background-color': 'black'

               });

           });

 

       });

 

   </script>

   <style>

      #div1{ margin:10px;padding:12px;

             border:2px solid #666;

             width:60px;}

      #div2 { margin:15px;padding:5px;

              border:5px solid #666;

              width:60px;}

      #div3 { margin:20px;padding:4px;

              border:4px solid #666;

              width:60px;}

      #div4 { margin:5px;padding:3px;

              border:3px solid #666;

              width:60px;}

  </style>

</head>

<body>

   <h2>innerwidth() Method Exapmle</h2>

   <p>Click on any square for get inner width:</p>

   <span id="result"> </span>

   <div id="div1" style="background-color:red;"></div>

   <div id="div2" style="background-color:Gray;"></div>

   <div id="div3" style="background-color:Green;"></div>

   <div id="div4" style="background-color:Maroon;"></div>

</body>

</html>

 

Output

 innerwidth.jpg

Further Readings

You may also want to read these related articles here

Ask Your Question 

Got a programming related question? You may want to post your question here

Programming Answers here

© 2019 DotNetHeaven. All rights reserved.