.width()

Syntax and Description for .width()(getter)

.width()(getter)

gets the current computed width for the first element in the set of matched elements.

The return value is the width of the element in pixels.

.width() returns a unitless pixel value (for example, 400). .css(width) returns a value with units intact (for example, 400px).

The following code sets the width first and then calls the .width() to check the width.


<html>
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){<!--   w w w  .  j a  v a 2  s  .c o m-->
             $("div").width(300);
             alert($("div").width());
        });
    </script>
    <style>
    div{
        width:200px;
        height:100px;
        overflow:auto;
    }
    h1 { width:1000px;height:1000px; }
  </style>

  </head>
  <body>
    <body>
       <div><h1>java2s.com</h1></div>
    </body>
</html>

Click to view the demo

The code above generates the following result.

Syntax and description for .width(value) (setter)

.width(value) (setter)

sets the width for matched element. value is an integer representing the number of pixels, or an integer along with an optional unit of measure appended. The return value is the jQuery object, for chaining purposes.

When calling .width('value'), the value can be either a string (number and unit) or a number. If only a number is provided for the value, jQuery assumes a pixel unit.

However, if a string is provided, any valid CSS measurement may be used for the width (such as 100px, 50%, or auto).

$("div.myElements").width(500) is identical to $("div.myElements").css("width","500px").

Set the width for a div element

The following code sets the width for a div element using the CSS then changes its width with .width() function.


<html>
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){<!--from w  w  w. j a  va 2 s. com-->
             $("div").width(300);
        });
    </script>
    <style>
    div{
        width:200px;
        height:100px;
        overflow:auto;
    }
    h1 { width:1000px;height:1000px; }
  </style>
  </head>
  <body>
    <body>
       <div><h1>java2s.com</h1></div>
    </body>
</html>

Click to view the demo

The code above generates the following result.

Set width with a function

The following code passes in a function to .width() to set the width.


<html>
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){<!--from   w  w w.j  av  a  2s  .  c  om-->
            $("div").css("width",function() {
               return $(this).width() + 20 + "px";
            });
        });
    </script>
    <style>
      div { margin:3px; width:50px; position:absolute;
            height:50px; left:10px; top:30px;
            background-color:yellow; }
      div.red { background-color:red; }
    </style>
  </head>
  <body>
    <body>
    <div id="testSubject"></div>
    <div id="display"></div>
    </body>
</html>

Click to view the demo

The code above generates the following result.

Chain .width() with .css() function


<html>
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){<!--from  w ww.ja  v a2  s. c om-->
                  $("div").one('click', function () {
                      $(this).width(30)
                             .css({cursor:"auto", "background-color":"blue"});
                  });
        });
    </script>
    <style>
    
      div { width:50px; height:70px; float:left; margin:5px;
            background:rgb(255,140,0); cursor:pointer; }
    
    </style>
  </head>
  <body>
    <body>
          <div></div>
          <div></div>

    </body>
</html>

Click to view the demo

The code above generates the following result.