jQuery .width() gets and sets element's 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(){<!--from www .j ava 2s.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>
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 ww w . j ava2 s. c o m-->
$("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>
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(){<!-- w ww. j a v a 2 s . 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>
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 www. java2 s . com-->
$("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>