中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

javascript中如何使用offsetWidth、clientWidth、innerWidth及相關屬性

發布時間:2020-07-27 11:51:20 來源:億速云 閱讀:229 作者:小豬 欄目:web開發

這篇文章主要講解了javascript中如何使用offsetWidth、clientWidth、innerWidth及相關屬性,內容清晰明了,對此有興趣的小伙伴可以學習一下,相信大家閱讀完之后會有幫助。

關于js中的offsetWidth、clientWidth、scrollWidth等一系列屬性及其方法一直都傻傻分不清,這里就來總結一下這些方法的用法和含義。

一、clientWidth和clientHeigh 、 clientTop和clientLeft

1,clientWidth的實際寬度
clientWidth = width+左右padding

2,clientHeigh的實際高度
clientHeigh = height + 上下padding 

3,clientTop的實際寬度
clientTop = boder.top(上邊框的寬度)

4,clientLeft的實際寬度
clientLeft = boder.left(左邊框的寬度)

二、offsetWidth和offsetHight 、 offsetTop和offsetLeft

1,offsetWidth的實際寬度
offsetWidth = width + 左右padding + 左右boder

2,offsetHeith的實際高度
offsetHeith = height + 上下padding + 上下boder

3,offsetTop實際寬度
offsetTop:當前元素 上邊框 外邊緣 到 最近的已定位父級(offsetParent) 上邊框 內邊緣的 距離。如果父級都沒有定位,則分別是到body 頂部 和左邊的距離

4,offsetLeft實際寬度
offsetLeft:當前元素 左邊框 外邊緣 到 最近的已定位父級(offsetParent) 左邊框 內邊緣的            距離。如果父級都沒有定位,則分別是到body 頂部 和左邊的距離

三、scrollWidth和scrollHeight 、 scrollTop和scrollLeft

1,scrollWidth實際寬度
scrollWidth:獲取指定標簽內容層的真實寬度(可視區域寬度+被隱藏區域寬度)。

2,scrollHeight的實際高度
scrollHeight:獲取指定標簽內容層的真實高度(可視區域高度+被隱藏區域高度)

3,scrollTop
scrollTop :內容層頂部 到 可視區域頂部的距離。
實例:var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;持續獲取高度的方式:

window.addEventListener('scroll', ()=>{
var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
});

4,scrollLeft
scrollLeft:內容層左端 到 可視區域左端的距離.

注意: 下面元素屬性和元素方法都通過 elem.屬性 或 elem.方法 的方式使用,window屬性通過 window.屬性 的方式使用,document屬性則通過document調用。

<script>
  /*
   ****** 元素視圖屬性
   * offsetWidth 水平方向 width + 左右padding + 左右border-width
   * offsetHeight 垂直方向 height + 上下padding + 上下border-width
   * 
   * clientWidth 水平方向 width + 左右padding
   * clientHeight 垂直方向 height + 上下padding
   * 
   * offsetTop 獲取當前元素到 定位父節點 的top方向的距離
   * offsetLeft 獲取當前元素到 定位父節點 的left方向的距離
   * 
   * scrollWidth 元素內容真實的寬度,內容不超出盒子高度時為盒子的clientWidth
   * scrollHeight 元素內容真實的高度,內容不超出盒子高度時為盒子的clientHeight
   * 
   ****** 元素視圖屬性結束
   * 
   ****** Window視圖屬性(低版本IE瀏覽器[<IE9]不支持) 【自測包含滾動條,但網絡教程都說不包含???】
   * innerWidth 瀏覽器窗口可視區寬度(不包括瀏覽器控制臺、菜單欄、工具欄) 
   * innerHeight 瀏覽器窗口可視區高度(不包括瀏覽器控制臺、菜單欄、工具欄)
   * ***** Window視圖屬性結束
   * 
   ****** Document文檔視圖
   * (低版本IE的innerWidth、innerHeight的代替方案)
   * document.documentElement.clientWidth 瀏覽器窗口可視區寬度(不包括瀏覽器控制臺、菜單欄、工具欄、滾動條)
   * document.documentElement.clientHeight 瀏覽器窗口可視區高度(不包括瀏覽器控制臺、菜單欄、工具欄、滾動條)
   * 
   * document.documentElement.offsetHeight 獲取整個文檔的高度(包含body的margin)
   * document.body.offsetHeight 獲取整個文檔的高度(不包含body的margin)
   * 
   * document.documentElement.scrollTop 返回文檔的滾動top方向的距離(當窗口發生滾動時值改變)
   * document.documentElement.scrollLeft 返回文檔的滾動left方向的距離(當窗口發生滾動時值改變)
   ****** Document文檔視圖結束
   * 
   ****** 元素方法
   * 1. getBoundingClientRect() 獲取元素到body
   * bottom: 元素底邊(包括border)到可視區最頂部的距離
   * left: 元素最左邊(不包括border)到可視區最左邊的距離
   * right: 元素最右邊(包括border)到可視區最左邊的距離
   * top: 元素頂邊(不包括border)到可視區最頂部的距離
   * height: 元素的offsetHeight
   * width: 元素的offsetWidth
   * x: 元素左上角的x坐標 
   * y: 元素左上角的y坐標 
   * 
   * 2. scrollIntoView() 讓元素滾動到可視區
   * 
   * ***** 元素方法結束
   * 
   */
</script>

上面屬性中,關于 window.innerWidth 和 window.innerHeight, 我自己測試的結果值是包含滾動條的,但網上的教程和相關文檔都說不包括滾動條,雖然滾動條的寬度不大,對整體影響也不明顯,但如果有道友有準確答案的,還請不吝賜教,順手留個言,謝謝!

看完上述內容,是不是對javascript中如何使用offsetWidth、clientWidth、innerWidth及相關屬性有進一步的了解,如果還想學習更多內容,歡迎關注億速云行業資訊頻道。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

延川县| 凤台县| 于都县| 盈江县| 平邑县| 三明市| 文化| 通山县| 巨鹿县| 沈丘县| 饶河县| 滨州市| 濮阳市| 五寨县| 大连市| 大庆市| 西华县| 安吉县| 嘉祥县| 南城县| 滨海县| 张北县| 阜新| 吴旗县| 兴宁市| 威远县| 汪清县| 辉南县| 正安县| 福州市| 嘉义市| 梅州市| 搜索| 广饶县| 罗平县| 泗阳县| 陆丰市| 阆中市| 东乡族自治县| 邢台县| 铁力市|