javascript中的offsetWidth、clientWidth、innerWidth及相關(guān)屬性方法

  • 元素視圖屬性
  offsetWidth 水平方向 width + 左右padding + 左右border-width
  offsetHeight 垂直方向 height + 上下padding + 上下border-width
       
  clientWidth 水平方向 width + 左右padding
  clientHeight 垂直方向 height + 上下padding
       
  offsetTop 獲取當(dāng)前元素到 定位父節(jié)點(diǎn) 的top方向的距離
  offsetLeft 獲取當(dāng)前元素到 定位父節(jié)點(diǎn) 的left方向的距離
       
  scrollWidth 元素內(nèi)容真實(shí)的寬度,內(nèi)容不超出盒子高度時(shí)為盒子的clientWidth
  scrollHeight 元素內(nèi)容真實(shí)的高度,內(nèi)容不超出盒子高度時(shí)為盒子的clientHeight
  • Window視圖屬性(低版本IE瀏覽器[<IE9]不支持)
innerWidth 瀏覽器窗口可視區(qū)寬度(不包括瀏覽器控制臺、菜單欄、工具欄)
innerHeight 瀏覽器窗口可視區(qū)高度(不包括瀏覽器控制臺、菜單欄、工具欄)
  • Document文檔視圖
 document.documentElement.clientWidth 瀏覽器窗口可視區(qū)寬度(不包括瀏覽器控制臺、菜單欄、工具欄、滾動條)
 document.documentElement.clientHeight 瀏覽器窗口可視區(qū)高度(不包括瀏覽器控制臺、菜單欄、工具欄、滾動條)

document.documentElement.offsetHeight 獲取整個(gè)文檔的高度(包含body的margin)
document.body.offsetHeight 獲取整個(gè)文檔的高度(不包含body的margin)
       
document.documentElement.scrollTop 返回文檔的滾動top方向的距離(當(dāng)窗口發(fā)生滾動時(shí)值改變)
document.documentElement.scrollLeft 返回文檔的滾動left方向的距離(當(dāng)窗口發(fā)生滾動時(shí)值改變)
  • 元素方法
    1. getBoundingClientRect() 獲取元素到body
    bottom: 元素底邊(包括border)到可視區(qū)最頂部的距離
    left: 元素最左邊(不包括border)到可視區(qū)最左邊的距離
    right: 元素最右邊(包括border)到可視區(qū)最左邊的距離
    top: 元素頂邊(不包括border)到可視區(qū)最頂部的距離
    height: 元素的offsetHeight
    width: 元素的offsetWidth
    x: 元素左上角的x坐標(biāo)
    y: 元素左上角的y坐標(biāo)
    
    2.scrollIntoView() 讓元素滾動到可視區(qū)
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容