.width()

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

Syntax

.width()(getter)

Parameters

None

Return value

The width of the element in pixels.

Description

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

Examples

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
             $("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>header 1</h1></div>
    </body>
</html>

Click to view the demo

find the width of div

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
                alert(  $("div").width());
        });
    </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

Syntax

.width(value) (setter)

Parameters

value: An integer representing the number of pixels, or an integer along with an optional unit of measure appended

Return value

The jQuery object, for chaining purposes.

Description

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

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
             $("div").width(300);
        });
    </script>
    <style>
    div{
        width:200px;
        height:100px;
        overflow:auto;
    }
    h1 { width:1000px;height:1000px; }
  </style>
  </head>
  <body>
    <body>
       <div><h1>header 1</h1></div>
    </body>
</html>

Click to view the demo

Set width with function

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("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

Chain .width() with .css() function

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
                  $("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