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.
Be the first to post a comment.