js/jQ各種取寬高與位置
Published in
6 min readOct 26, 2018
有鑑於常常迷失於javascript和jQuery中取視窗、元素的寬高、位置等
所以自己整理了各種取寬高位置的方法。
原生js
以下是原生js用法
元素的寬高
- clientWidth 取得元素的寬度(含padding 不含 border)較少用
- clientHeight 取得元素的高度(含padding 不含 border)較少用
- offsetWidth 取得元素的寬度(包含 padding 和 border)
- offsetHeight 取得元素的高度(包含 padding 和 border)
如果元素被overflow擋住
Element.scrollHeight 是衡量元素包含因為 overflow 而沒顯示在螢幕上的內容高度的唯讀屬性。
- scrollWidth 取得整個沒被擋住的寬
- scrollHeight 取得整個沒被擋住的高
詳細介紹,圖解更容易懂
視窗的寬高(常用於視窗捲動百分比)
取值:
- window.innerHeight
注意:window本身沒有scrollTop/Left這個屬性,所以window.scrollTop是undefined的,可以console.log印出來看看。
視窗捲動百分比
所以我們常用取得視窗捲動百分比時可以使用:
let documentHeight = document.body.scrollHeight;
let windowHeight = window.innerHeight;window.addEventListener("scroll", function(){
let scorllPercent = this.scrollY / (documentHeight - windowHeight)
console.log(scorllPercent);
});
將目前捲軸位置(this.scrollY)除以 document高度(document.body.scrollHeight) 減 可見視窗高度(window.innerHeight),不清楚可以畫圖就清楚了。
取得border的值
還有較少見的,如果我今天border很大,可以取得border
- clientTop 取得元素的border-top
- clientLeft 取得元素的border-ledt
元素的位置
相對於父層的位置
- offsetTop — 取得相對於上層的Y座標
- offsetLeft — 取得相對於上層的X座標
(類似jQ的position)
絕對位置
原生js中沒有直接的語法像jQuery的offset可以取得絕對位置,但可透過相對位置的方法加上遍歷直到父元素沒有為止,可參考:原生JS获取页面中DIV绝对位置的方法
視窗卷軸
- window.scrollX 卷軸現在寬值(X軸)
- window.scrollY 卷軸現在高值(Y軸)
我們在Day13有練習過一次。
元素卷軸
我們要操作指定元素內的捲軸可以使用
- Element.scorllTop
- Element.scrollLeft
如果要給值:scorllTop = 500
建議卷軸操作還是交給jQuery比較不會搞混
getBoundingClientRect()
可以快速取得元素的許多值,高、寬、位置等
- DOMRect.top:元素於目前可視範圍中,距離上方邊界的距離。
- DOMRect.bottom:元素於目前可視範圍中,距離下方邊界的距離。
- DOMRect.left:元素於目前可視範圍中,距離左邊邊界的距離。
- DOMRect.right:元素於目前可視範圍中,距離右邊邊界的距離。
- DOMRect.x:元素於目前可視範圍中,水平方向的座標。
- DOMRect.y:元素於目前可視範圍中,垂直方向的座標。
- DOMRect.width:元素的寬。
- DOMRect.height:元素的高。
我們在 js30 Day22有介紹過
JQuery
以下是JQ用法
元素的寬高
- width() — 設置或取得元素的宽度
- height() — 設置或取得元素的高度
(括號內放值可自訂寬高) - innerWidth() — 取得元素的寬度(含 padding)
- innerHeight() — 取得元素的高度(含 padding)
(注意:元素內,不含border等) - outerWidth() — 取得元素的寬度(包含 padding 和 border)
- outerHeight() — 取得元素的高度(包含 padding 和 border)
(注意:不含margin,括號內加入true就包含margin)
元素的位置
絕對位置
相對整個視窗中
- offset() — 取得一個物件,包含top和left
- offset().left — 取得X座標
- offset().top — 取得Y座標
也可以傳入一個物件設定他的位置(數值為字串)
$(‘.block’).offset({
top: ‘50’, //數值為字串
left: ‘100’,
})
相對位置
相對於父層
- position() — 取得一個物件,包含top和left
- position().left — 取得相對於上層的X座標
- position().top — 取得相對於上層的Y座標
使用方法和絕對位置一樣,只是相對位置為父層(上一層)
視窗的寬高
- 取得螢幕寬 $(window).width()
- 取得螢幕高 $(window).height()
跟取得元素寬高一樣,基本上就不會有inner/outer差別了
視窗(元素)卷軸位置
如果元素本身沒有卷軸會取得0,所以大多情況下都是用在window/html/body這些元素
- $(window).scrollTop() 卷軸現在Y值(高度)
- $(window).scrollLeft() 卷軸現在的X值
常用在捲動時取得高度
$(window).scroll(function(){
console.log($(‘html,body’).scrollTop())
console.log($(this).scrollTop())
})
或返回頂端效果
$(‘.backTop’).click(function(){
$(‘html,body’).animate({scrollTop:0},400)
})