jQuery中的尺寸操作(width,height,innerWidth,innerHeight,outerWidth,outerHeight)及与DOM中尺寸操作的区别
一. jQuery
- width()
返回当前元素的宽度 - height()
返回当前元素的高度 - innerWidth()
返回当前元素的宽度(含padding值) - innerHeight()
返回当前元素的高度(含padding值) - outerWidth()
返回当前元素的宽度(含padding+border值) - outerHeight()
返回当前元素的高度(含padding+border值)
<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>
二. DOM
- width
- height
在DOM中的width和height与jQuery中的大同小异，这里不再做讲解 - innerWidth
- innerHeight
但是DOM中的innerWidth和innerHeight却与jQuery有很大差别
首先：DOM中的innerWidth和innerHeight返回的是浏览器相关尺寸，即window对象的尺寸，而不是单独的一个元素，比如div
其次：window对象的只读属性,声明了窗口的文档显示区的高度和宽度， (注意：这里的宽度和高度不包括菜单栏、工具栏以及滚动条等的高度)
例如：我的电脑屏幕尺寸是1536*850
console.log(window.innerWidth);//1536
console.log(window.innerHeight);//754
/* 在这里为什么innerHeight不是850呢，因为innerHeight不包括菜单栏、工具栏以及滚动条等的高度，所以比850小 */
- outerWidth
- outerHeight
而outerWidth和outerHeight返回的就是浏览器窗口的大小(包括菜单栏、工具栏以及滚动条等的高度)
console.log(window.outerWidth);//1536
console.log(window.outerHeight);//850