How to Set the width of a HTML Element Dynamically Using jQuery

Using jquery width() method, you can get the width of a HTML element and width(value) is used to set the width of a HTML element. Here is how to do.

HTML

<form>
        <input type="text" class="input-box">
        <button type="button" class="btn">Set Width</button>
</form>

<div class="box">This is simple box</div>

CSS

.box{
        float: left;
        background: #f2f2f2;
        border: 1px solid #ccc;
    }

Jquery

$(document).ready(function(){
    $(".btn").click(function(){
        var val = $(".input-box").val();
        $(".box").width(val);
    });
});

To check the code, enter some number in input box and click on the button. Box width will increase automatically.