元素的尺寸
- width() height()
- innerWidth() innerHeight()
- outerWidth() outerHeight()
- 參數的作用(設置寬高)
- 與原生JS的區別
參數的作用(設置寬高)
<div id="div1" style="width: 100px; padding: 10px; border: 5px solid #111; margin: 20px;"></div>
<script>
$('#div1').width(200);// width = 200
$('#div1').innerWidth(200);//width: 200 - padding
$('#div1').outerWidth(200);//width: 200 - padding - border
$('#div').outerWidth(200, true);//width: 200 - padding -border - margin
</script>
實際都是改變的是width值
與原生JS的區別
<div id="div1" style="width: 100px;"></div>
<script>
var oDiv = document.getElementById('div1');
alert(oDiv.offsetWidth);//100
</script>
當我們隱藏div之后(display: none) 我們就不能獲取到div的值了
JQ實戰小技巧
- 可視區的尺寸(可以理解為窗口的尺寸)
- 頁面的尺寸(可以理解為文檔的尺寸)
$(window).width();//可視區的尺寸
$(document).width();//頁面的尺寸
滾動距離
- scrollTop()
- scrollLeft()
一個公式 當滾動到底部的時候 滾動距離 + 可視區高度 = 頁面的高度
$(document).scrollTop()+$(window).height() === $(document).height();//true
##元素距離
## offset()
元素相對于整個頁面的距離
返回一個對象包含left和top屬性
## position()
相對與最近的父級定位元素的距離
注意: position() 是計算的margin的頂點到父級定位元素的距離, 其他跟位置相關的函數或屬性都是以border的頂點為參考點
