The size operation in jQuery (width, height, innerWidth, innerHeight, outerWidth, outerHeight) and the difference between the size operation in DOM
1. jQuery
- width()
returns the width of the current element - height()
returns the height of the current element - innerWidth()
returns the width of the current element (including padding value) - innerHeight()
returns the height of the current element (including padding value) - outerWidth()
returns the width of the current element (including padding+border value) - outerHeight()
returns the height of the current element (including padding+border value)
<style>
* {
margin: 0;
}
div {
width: 200px;
height: 200px;
background-color: pink;
padding: 20px;
border: 10px dashed yellow;
}
</style>
<script src="jQuery.min.js"></script>//引入jQuery
<body>
<div></div>
<script>
console.log('div的宽度是' + $('div').width());
console.log('div的高度是' + $('div').height());
console.log('div的宽度是(含padding值)' + $('div').innerWidth());
console.log('div的高度是(含padding值)' + $('div').innerHeight());
console.log('div的宽度是(含padding+border值)' + $('div').outerWidth());
console.log('div的高度是(含padding+border值)' + $('div').outerHeight());
/* 观察下列返回结果 */
/*
div的宽度是200
div的高度是200
div的宽度是(含padding值)240(200+20*2)
div的高度是(含padding值)240(200+20*2)
div的宽度是(含padding+border值)260(200+20*2+10*2)
div的高度是(含padding+border值)260(200+20*2+10*2)
*/
</script>
</body>
2. DOM
- width
The width and height of height in DOM are similar to those in jQuery, so I won’t explain them here.- innerWidth
- innerHeight,
but innerWidth and innerHeight in DOM are very different from jQuery.
First: innerWidth and innerHeight in DOM return browser-related dimensions, that is, the size of the window object, rather than a single element, such as div.
Second: window object The read-only property of, declares the height and width of the document display area of the window, (Note: the width and height here do not include the height of the menu bar, toolbar, and scroll bar, etc.)
For example: my computer screen size is 1536*850
console.log(window.innerWidth);//1536
console.log(window.innerHeight);//754
/* 在这里为什么innerHeight不是850呢，因为innerHeight不包括菜单栏、工具栏以及滚动条等的高度，所以比850小 */
- outerWidth
- outerHeight
and outerWidth and outerHeight return the size of the browser window (including the height of the menu bar, toolbar, scroll bar, etc.)
console.log(window.outerWidth);//1536
console.log(window.outerHeight);//850