jQuery .width()

jQuery .width() gets or sets width of the target element;

$(DOMElement).width(); // Element width

$(DOMElement).innerWidth(); // Element width + padding

$(DOMElement).outerWidth(); // Element width + padding + border

$(DOMElement).outerWidth(true); // Element width + padding + border + margin

Also check jQuery .height()

js:

$(function(){

    var target_width = $('.target').width(); // get target width

    $('.target2').width( target_width ); // set target width

    $('.target2 .width2 span').text( target_width );

    $('.innerWidth_log span').text( $('.target').innerWidth() );

    $('.outerWidth_log span').text( $('.target').outerWidth() );

});​

html:

<div class="well target">

    <span class="label label-warning">.target</span>

    <p>set in css:

        <span class="label label-info">width: 400px;</span>

        <span class="label label-info">padding: 10px;</span>

        <span class="label label-info">margin: 12px;</span>

        <span class="label label-info">border: 2px;</span>

    </p>

    <p>get values by 

</div>

 

<div class="target2">

    <span class="label label-success width2">width:<span></span></span>

    <span>width of this block set by jQuery (same as prev block)</span>

</div>



<div class="well">

    get .target properties with jQuery:

    <span class="label label-success innerWidth_log">

        innerWidth: <span></span>

    </span>

    

    <span class="label label-success outerWidth_log">

        outerWidth: <span></span>

    </span>

    

</div>

css:

.target {

    width:400px;

    padding:10px;

    margin:12px;

    border:2px solid #bbb;

}



.target2 {

    background: #ccc;

    margin:10px 0;

}