js/jQ各種取寬高與位置

發表於 | 分類於 | 閱讀次數:
| 1,124

有鑑於常常迷失於javascript和jQuery中取視窗、元素的寬高、位置等
所以整理了各種取寬高位置的方法

原生js

以下是原生js用法

元素的寬高

取值

  • clientWidth 取得元素的寬度（含padding 不含 border）較少用
  • clientHeight 取得元素的高度（含padding 不含 border）較少用
  • offsetWidth 取得元素的寬度（包含 padding 和 border）
  • offsetHeight 取得元素的高度（包含 padding 和 border）

設置（直接透過style設定,不會改變到預設padding 和 border）

  • style.width = “120px”;
  • style.height = “130px”;

如果元素被overflow擋住

Element.scrollHeight 是衡量元素包含因為 overflow 而沒顯示在螢幕上的內容高度的唯讀屬性。

  • scrollWidth 取得整個沒被擋住的寬
  • scrollHeight 取得整個沒被擋住的高

詳細介紹
圖解更容易懂

可以用來判斷元素是否完全被滾過

取得border的值

還有較少見的，如果我今天border很大，可以取得border

  • clientTop 取得元素的border-top
  • clientLeft 取得元素的border-ledt

元素的位置

相對於父層的位置

  • offsetTop - 取得相對於上層的Y座標
  • offsetLeft - 取得相對於上層的X座標
    (類似jQ的position)

絕對位置

原生js中沒有直接的語法像jQuery的offset可以取得絕對位置，但可透過相對位置的方法加上遍歷直到父元素沒有為止，可參考：原生JS获取页面中DIV绝对位置的方法

視窗的寬高

取得視窗的寬高我們可利用上面提到元素的寬高來取得

  • document.body.clientWidth
  • document.body.clientHeight
  • document.body.offsetWidth(包括邊線和捲軸的寬)
  • document.body.offsetHeight

卷軸位置

範例：

1
2
3
window.addEventListener('scroll',function(){
  console.log(this.scrollY)
})

注意：window本身沒有scrollTop/Left這個屬性，
所以window.scrollTop是undefined的，可以console.log印出來看看：

所以我們取得視窗卷軸可以使用：

視窗卷軸

  • 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：元素的高。

我們在js30Day22有介紹過

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座標
    也可以傳入一個物件設定他的位置(數值為字串)
    1
    2
    3
    4
    $('.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值

常用在捲動時取得高度

1
2
3
4
$(window).scroll(function(){
  console.log($('html,body').scrollTop())
  console.log($(this).scrollTop())
})

或返回頂端效果

1
2
3
$('.backTop').click(function(){
  $('html,body').animate({scrollTop:0},400)
})

0%