jQuery Style How to - Change div element and resize

Question

We would like to know how to change div element and resize.

Answer


<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<style type='text/css'>
div {<!--from ww w. ja  v  a 2 s  .  c o  m-->
  display: table;
  width: 400px;
  white-space: nowrap;
}

label {
  display: table-cell;
  padding-right: 3px;
  width: 1em;
}

input {
  display: table-cell;
  width: 100%;
}

span {
  display: table-cell;
  padding-left: 6px;
  width: 1em;
}
</style>
</head>
<body>
  <p>Set widths with a unit (ie 500px, 20%)</p>
  <div id="testme">
    <label for="my-very-special-input">Width</label> 
    <input id="my-very-special-input" /> 
    <span><button type="button">Set Width</button></span>
  </div>
  <script>
$(document).ready(function() {
  $('button').click(function() {
    var newWidth = $('input').val();
    $('div').css('width',newWidth);
  });
});
</script>
</body>
</html>

The code above is rendered as follows: