jQuery – Dimensions
With jQuery, it is easy to work with the dimensions of elements and browser window.
jQuery Dimension Methods
jQuery has several important methods for working with dimensions:
- width()
- height()
- innerWidth()
- innerHeight()
- outerWidth()
- outerHeight()
jQuery Dimensions
jQuery width() and height() Methods
The width() method sets or returns the width of an element (includes NO padding, border, or margin).
The height() method sets or returns the height of an element (includes NO padding, border, or margin).
The following example returns the width and height of a specified <div> element:
<!DOCTYPE html>
<html>
<head>
<script src=”//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js”>
</script>
<script>
$(document).ready(function(){
$(“button”).click(function(){
var txt=””;
txt+=”Width of div: ” + $(“#div1”).width() + “</br>”;
txt+=”Height of div: ” + $(“#div1”).height();
$(“#div1″).html(txt);
});
});
</script>
</head>
<body>
<div id=”div1″ style=”height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;”></div>
<br>
<button>Display dimensions of div</button>
<p>width() – returns the width of an element.</p>
<p>height() – returns the height of an element.</p>
</body>
</html>
