jq 獲取元素的尺寸
| 方法 | 作用 |
|---|
| width() | 獲取元素的內容寬度 |
| height() | 獲取元素的內容高度 |
| innerWidth() | 獲取元素（內容+padding）寬度 |
| innerHeight() | 獲取元素（內容+padding）高度 |
| outerWidth() | 獲取元素（內容+padding+border）寬度 |
| outerHeight() | 獲取元素（內容+padding+border）高度 |
| outerWidth(true) | 獲取元素（內容+padding+border+margin）寬度 |
| outerHeight(true) | 獲取元素（內容+padding+border+margin）高度 |
| 寫法 | 作用 |
|---|
| $(window).width() | 獲取瀏覽器可視區寬度 |
| $(window).height() | 獲取瀏覽器可視區高度 |
| $(document).width() | 獲取頁面寬度 |
| $(document).height() | 獲取頁面高度 |
| $('body').width() | 獲取頁面寬度，body默認有8px的margin |
| $('body').height() | 獲取頁面高度，body默認有8px的margin |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
background: Red;
padding: 10px;
border: 5px black solid;
margin: 3px;
display: none;
}
</style>
<script src="./jquery-3.4.1.js"></script>
</head>
<body style="height: 3000px;">
<div></div>
<script>
console.log($('div').width());
console.log($('div').height());
console.log($('div').innerWidth());
console.log($('div').innerHeight());
console.log($('div').outerWidth());
console.log($('div').outerHeight());
console.log($('div').outerWidth(true));
console.log($('div').outerHeight(true));
$('div').width(300);
$('div').height(300);
console.log($('div').width())
$('div').innerWidth(300);
console.log($('div').width());
$('div').outerWidth(300)
console.log($('div').width());
$('div').outerWidth(300, true)
console.log($('div').width());
console.log($('div').get(0).offsetWidth)
console.log($('div').width())
console.log($(window).width())
console.log($(window).height())
console.log($(document).width());
console.log($('body').width());
</script>
</body>
</html>
