javascript中的offsetWidth、clientWidth、innerWidth及相關(guān)屬性方法
關(guān)于js中的offsetWidth、clientWidth、scrollWidth等一系列屬性及其方法一直都傻傻分不清,這里就來總結(jié)一下這些方法的用法和含義。
一、clientWidth和clientHeigh 、 clientTop和clientLeft
1,clientWidth的實(shí)際寬度
clientWidth = width+左右padding
2,clientHeigh的實(shí)際高度
clientHeigh = height + 上下padding
3,clientTop的實(shí)際寬度
clientTop = boder.top(上邊框的寬度)
4,clientLeft的實(shí)際寬度
clientLeft = boder.left(左邊框的寬度)
二、offsetWidth和offsetHight 、 offsetTop和offsetLeft
1,offsetWidth的實(shí)際寬度
offsetWidth = width + 左右padding + 左右boder
2,offsetHeith的實(shí)際高度
offsetHeith = height + 上下padding + 上下boder
3,offsetTop實(shí)際寬度
offsetTop:當(dāng)前元素 上邊框 外邊緣 到 最近的已定位父級(offsetParent) 上邊框 內(nèi)邊緣的 距離。如果父級都沒有定位,則分別是到body 頂部 和左邊的距離
4,offsetLeft實(shí)際寬度
offsetLeft:當(dāng)前元素 左邊框 外邊緣 到 最近的已定位父級(offsetParent) 左邊框 內(nèi)邊緣的 距離。如果父級都沒有定位,則分別是到body 頂部 和左邊的距離
三、scrollWidth和scrollHeight 、 scrollTop和scrollLeft
1,scrollWidth實(shí)際寬度
scrollWidth:獲取指定標(biāo)簽內(nèi)容層的真實(shí)寬度(可視區(qū)域?qū)挾?被隱藏區(qū)域?qū)挾龋?br />
2,scrollHeight的實(shí)際高度
scrollHeight:獲取指定標(biāo)簽內(nèi)容層的真實(shí)高度(可視區(qū)域高度+被隱藏區(qū)域高度)
3,scrollTop
scrollTop :內(nèi)容層頂部 到 可視區(qū)域頂部的距離。
實(shí)例:var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;持續(xù)獲取高度的方式:
window.addEventListener('scroll', ()=>{
var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
});
4,scrollLeft
scrollLeft:內(nèi)容層左端 到 可視區(qū)域左端的距離.
注意: 下面元素屬性和元素方法都通過 elem.屬性 或 elem.方法 的方式使用,window屬性通過 window.屬性 的方式使用,document屬性則通過document調(diào)用。
<script> /* ****** 元素視圖屬性 * 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)容不超出盒子高度時為盒子的clientWidth * scrollHeight 元素內(nèi)容真實(shí)的高度,內(nèi)容不超出盒子高度時為盒子的clientHeight * ****** 元素視圖屬性結(jié)束 * ****** Window視圖屬性(低版本IE瀏覽器[<IE9]不支持) 【自測包含滾動條,但網(wǎng)絡(luò)教程都說不包含???】 * innerWidth 瀏覽器窗口可視區(qū)寬度(不包括瀏覽器控制臺、菜單欄、工具欄) * innerHeight 瀏覽器窗口可視區(qū)高度(不包括瀏覽器控制臺、菜單欄、工具欄) * ***** Window視圖屬性結(jié)束 * ****** Document文檔視圖 * (低版本IE的innerWidth、innerHeight的代替方案) * document.documentElement.clientWidth 瀏覽器窗口可視區(qū)寬度(不包括瀏覽器控制臺、菜單欄、工具欄、滾動條) * document.documentElement.clientHeight 瀏覽器窗口可視區(qū)高度(不包括瀏覽器控制臺、菜單欄、工具欄、滾動條) * * document.documentElement.offsetHeight 獲取整個文檔的高度(包含body的margin) * document.body.offsetHeight 獲取整個文檔的高度(不包含body的margin) * * document.documentElement.scrollTop 返回文檔的滾動top方向的距離(當(dāng)窗口發(fā)生滾動時值改變) * document.documentElement.scrollLeft 返回文檔的滾動left方向的距離(當(dāng)窗口發(fā)生滾動時值改變) ****** Document文檔視圖結(jié)束 * ****** 元素方法 * 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ū) * * ***** 元素方法結(jié)束 * */ </script>
上面屬性中,關(guān)于 window.innerWidth 和 window.innerHeight, 我自己測試的結(jié)果值是包含滾動條的,但網(wǎng)上的教程和相關(guān)文檔都說不包括滾動條,雖然滾動條的寬度不大,對整體影響也不明顯,但如果有道友有準(zhǔn)確答案的,還請不吝賜教,順手留個言,謝謝!
到此這篇關(guān)于javascript中的offsetWidth、clientWidth、innerWidth及相關(guān)屬性方法的文章就介紹到這了,更多相關(guān)javascript offsetWidth clientWidth innerWidth內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- scrollWidth,clientWidth,offsetWidth的區(qū)別
- javascript scrollLeft,scrollWidth,clientWidth,offsetWidth 完全詳解
- scrollWidth,clientWidth與offsetWidth的區(qū)別
- HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth完全詳解
- this.clientWidth和this.offsetWidth兩個有什么不同
- 與ClientWidth有關(guān)的一點(diǎn)資料
- JavaScript中clientWidth,offsetWidth,scrollWidth的區(qū)別
相關(guān)文章
JavaScript調(diào)用瀏覽器打印功能實(shí)例分析
這篇文章主要介紹了JavaScript調(diào)用瀏覽器打印功能的方法,實(shí)例分析了針對各種常用瀏覽器調(diào)用打印功能的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07
最精簡的JavaScript實(shí)現(xiàn)鼠標(biāo)拖動效果的方法
這篇文章主要介紹了最精簡的JavaScript實(shí)現(xiàn)鼠標(biāo)拖動效果的方法,可實(shí)現(xiàn)javascript控制鼠標(biāo)拖動div層效果的方法,需要的朋友可以參考下2015-05-05
JS拖動技術(shù) 關(guān)于setCapture使用
JS拖動技術(shù) 關(guān)于setCapture使用,學(xué)習(xí)js拖動效果的朋友可以參考下。2010-12-12
用js實(shí)現(xiàn)輸入提示(自動完成)的實(shí)例代碼
用js實(shí)現(xiàn)輸入提示(自動完成)的實(shí)例代碼,需要的朋友可以參考一下2013-06-06
詳解webpack之scss和postcss-loader的配置
本篇文章主要介紹了詳解webpack之scss和postcss-loader的配置,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
原生js實(shí)現(xiàn)省市區(qū)三級聯(lián)動代碼分享
這篇文章主要介紹了原生js實(shí)現(xiàn)省市區(qū)三級聯(lián)動功能以及代碼分享,對此有需要的朋友可以參考學(xué)習(xí)下。2018-02-02

