您好,登錄后才能下訂單哦!
這篇文章主要講解了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及相關屬性有進一步的了解,如果還想學習更多內容,歡迎關注億速云行業資訊頻道。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。