Get computed width of element with .outerWidth()

.outerWidth()


Description: Get the computed width for an element, including padding, border, and margin.


Example:

<!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>outerWidth demo</title>
      <script src="http://code.bitsycode.com/bitsycode-latest.min.js"></script>
    </head>
    <body>
      
      <div class="mycontainer">This is my container</div>
      <div class="result"></div>
      
      <script>
         
         bitsyCode.ready(function(){
            var outerWidth = bitsyCode(".mycontainer").outerWidth();
            bitsyCode(".result").html(outerWidth);
            
            var outerWidth_setWidth = bitsyCode(".mycontainer").outerWidth('300px'); //SET WIDTH 
            
         })
         
      </script>
     
    </body>
    </html>

Preview:

This is my container

  • Usage

    • How to use:

      Get the computed width for an element, including padding, border, and margin.

    • USAGE:

      bitsyCode("element").outerWidth();
    • Set the width of an element:

      bitsyCode("element").outerWidth('200px'); // Pass through a width value
  • Options

    • What options are there:

      You may pass a width value as an option to set the width of the element.

  • Returns

    • Returns: the width value of the element.
      Return: 0 //returns a width value, when not setting a width
Share