JQuery Example: Dimensions - Set Outerwidth And Outerheight

<!DOCTYPE html>
<title>JQuery Example: Dimensions - Set Outerwidth And Outerheight</title> 
<style>
  #resizeMe {
    background: pink;
    width: 30vw;
    height: 30vh;
    margin: 1em;
    padding: 1em;
    border: 5px solid firebrick;
  }
</style>
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script>
  $( function() {
    $( "button" ).click( function() {
      $("#resizeMe").outerWidth( "70vw" ).outerHeight( "70vh" );
    });
  });
</script>

<button>Resize the Box</button>
<p>Includes padding and borders (but not margins).</p>
<div id="resizeMe">
</div>

In this example, the left side provides the code used to render the output in the right side.

Feel free to copy and paste the code into your own project and modify as you wish.

More Examples >>

Using the jQuery Library

The above example relies on the jQuery library. This is loaded in the part that reads . Removing that part will prevent the example from working properly.

jQuery is an open source and cross-platform JavaScript library that can help web developers perform document traversal and manipulation, event handling, animation, Ajax, applying styles, and more. It provides an easy way for us to mainipulate the document object model (DOM).

To use the jQuery library in your own projects, you can use a CDN (like the above example uses), or you can download your own library. See the jQuery website for more information.