獲取寬度（offsetParent、clientWidth、clientHeight、offsetWidth、offsetheight、scrollWidth、scrollHeight、offsetTop、offsetLeft、scrollTop、scrollLeft） · 前端

[TOC] ![](https://img.kancloud.cn/17/6c/176c4a3d6a68fb3510290bef535f8da5_756x577.png) >[warning] 黃色為border ## **1、element.clientWidth:** 返回元素的可見寬度(元素內容區with值+padding) * element.clientHeight = height + CSS padding - 水平滾動條高度 (如果存在) * element.clientWith = with+ CSS padding - 垂直滾動條寬度 (如果存在) * **document.body.clientWidth:** * **谷歌、火狐得出的寬度：body的內容區+padding** * **ie得出的寬度：body的內容區-border** ## **2、clientTop：** 一個元素頂部邊框的寬度（以像素表示）。嗯。。就只是??border-top-width ## **3、element.offsetWidth:** 返回元素的整個實際寬度(元素內容區with值+padding+border) * **document.body.offsetWidth:** * **谷歌、火狐得出的寬度：body的內容區+padding+border** * **ie得出的寬度：body的內容區** ## **4、offsetLeft：** 當前元素針對于其定位父元素的水平偏移量，父元素沒設置默認一直向上直到定位到html ``` <body> <style type="text/css"> html,body{ padding: 0; margin: 0; } #box1{ width: 100px; height: 100px; margin: 25px; padding: 20px; border:5px solid red; /*position: relative;*/ overflow: scroll; } #box2{ width: 200px; height: 200px; margin: 25px; padding: 20px; border:55px solid blue; } </style> <div id="box1"> <div id="box2"> </div> </div> </div> <script type="text/javascript"> var box1Div = document.getElementById("box2"); var text="offsetLeft: " + box1Div.offsetLeft + "<br>offsetTop: " + box1Div.offsetTop; console.log(text);//offsetLeft: 75<br>offsetTop: 75 去掉box1注釋則是offsetLeft: 45<br>offsetTop: 45 </script> </body> ``` ![](https://img.kancloud.cn/64/7c/647ce1aec865ef7b6c2bdc77e7da8274_393x361.png) ## **5、offsetTop：** 當前元素針對于其定位父元素的垂直偏移量 >[danger]**注：在css設置body為2400px時body的實際寬度為2400+border+padding；而**谷歌、火狐為2400px ## **6、element.scrollWidth:** 獲取整個滾動區域的寬度(內容區+padding) box2元素網頁正文全文寬度(內容區+padding)： * **document.body.scrollWidth:** * **谷歌、火狐得出的寬度：body的內容區+padding** * **ie得出的寬度：body的實際可用寬度-border** * **正文全文高度是element.scrollHeight** ## **7、scrollLeft：** 水平滾動條滾動的距離（當滾動到底時可簡單理解為就是多出視口的部分）設置或獲取位于對象左邊界和窗口中目前可見內容的最左端之間的距離 ## **8、scrollTop：** 垂直滾動條滾動的距離（當滾動到底時可簡單理解為就是多出視口的部分）設置或獲取位于對象最頂端和窗口中可見內容的最頂端之間的距離 ![](https://img.kancloud.cn/2a/41/2a4174572d5e1943bfc3dfee89fcae54_739x211.png) ![](https://img.kancloud.cn/85/31/8531a15d98eb2236d7cb2a21f9b603cc_727x665.png) ## **offsetParent:** 獲取當前元素的開啟了position定位的最近祖先元素，如果祖先元素沒有設置定位，那么返回的是body ## **事件中獲取坐標** event.clientX?相對文檔的水平座標 event.clientY?相對文檔的垂直座標 event.offsetX?相對容器的水平坐標 event.offsetY?相對容器的垂直坐標 ``` <div id="box1"> <div id="box2" style="position: relative;"> <div id="box3"> <div id="box4"></div> </div> </div> </div> <script type="text/javascript"> var box4=document.getElementById("box4"); var box=box4.offsetParent; console.log(box);//返回box2節點對象 </script> ``` ## **window.screen.width**:瀏覽設備的分辨率（電腦、手機、平板等） ~~~ console.log(window.screen.width );//瀏覽設備的分辨率（電腦、手機、平板等） 1920 ~~~ ## **window.screen.availWidth**:瀏覽設備的實際可用寬度（電腦、手機、平板等） ~~~ console.log(window.screen.availWidth );//瀏覽設備的實際可用寬度（電腦、手機、平板等） 1920 ~~~ ## **window.innerWidth**瀏覽器的可用（內部）寬度（包括滾動條等）\[ie不支持\] ~~~ console.log(window.innerWidth);//瀏覽器的可用（內部）寬度（包括滾動條等）\[ie不支持\] ~~~ ## **其他** ~~~ console.log($("#div2").height());//(內容區) 1000 console.log($("#div2").innerHeight());//(內容區+padding) 1040 console.log($("#div2").outerHeight());//(內容區+padding+border)1060 console.log($("#div2").offset());//匹配元素在當前視口的相對偏移 {top: 640, left: 160} console.log($("#div2").position());//返回匹配元素相對于父元素的位置（偏移） {top: 610, left: 130} console.log($("#div2").scrollTop());//返回或設置匹配元素的滾動條的垂直位置(匹配的元素必須設置overflow-y: scroll;) 0 console.log($("#div2").scrollLeft());//返回或設置匹配元素的滾動條的水平位置(匹配的元素必須設置overflow-y: scroll;) 0 ~~~ ## **示例:** **示例1:元素可見寬/高(clientWidth/clientHeight)與實際寬/高(offsetWidth/offsetHeight)** ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> <style> body{ font-size:12px; } #myDIV { height: 250px; width: 400px; padding: 10px; margin: 15px; border: 5px solid red; background-color: lightblue; overflow: auto; } #myDIV2 { height: 250px; width: 400px; padding: 10px; margin: 15px; border: 5px solid red; background-color: lightblue; } #content { height: 800px; width: 2000px; background-color: lightyellow; } </style> </head> <body> <p>在這個實例中，子 div 元素 (#content) 插入到第一個 div 中，由子 div 元素比第父 div元素 (#myDIV) 大， (子元素為 800x2500 ，父元素為 250x400), 所以我們使用了滾動條。</p> <p>點擊按鈕獲取 div 元素的 clientHeight, offsetHeight, clientWidth 和 offsetWidth 屬性值。</p> <button onclick="myFunction()">點我</button> <p>請注意父 div 中的滾動條“得到”子 div 的右側和底部內邊距（padding），這導致父 div 中 clientHeight 和 clientWidth 的返回值低于另一個，而 offsetHeight 和 offsetWidth 不受此影響。 <div id="myDIV"> <div id="content"></div> </div> <div id="myDIV2"> <div id="content2"></div> </div> <script> function myFunction() { var elmnt = document.getElementById("myDIV"); var txt = ""; txt += "<b>div 的樣式信息:</b><br>"; txt += "clientHeight:高度包含內邊距（padding）: " + elmnt.clientHeight + "px<br>"; txt += "offsetHeight:高度包含內邊距（padding）、邊框（border）及滾動條: " + elmnt.offsetHeight + "px<br>"; txt += "clientWidth:寬度包含內邊距（padding）: " + elmnt.clientWidth + "px<br>"; txt += "offsetWidth:寬度包含內邊距（padding）、邊框（border）及滾動條: " + elmnt.offsetWidth + "px"; document.getElementById("content").innerHTML = txt; var elmnt2 = document.getElementById("myDIV2"); var txt2 = ""; txt2 += "<b>div2 的樣式信息:</b><br>"; txt2 += "clientHeight:高度包含內邊距（padding）: " + elmnt2.clientHeight + "px<br>"; txt2 += "offsetHeight:高度包含內邊距（padding）和邊框（border）: " + elmnt2.offsetHeight + "px<br>"; txt2 += "clientWidth:寬度包含內邊距（padding）: " + elmnt2.clientWidth + "px<br>"; txt2 += "offsetWidth:寬度包含內邊距（padding）和邊框（border）: " + elmnt2.offsetWidth + "px"; document.getElementById("content2").innerHTML = txt2; } </script> </body> </html> ``` ![](https://img.kancloud.cn/bd/c8/bdc8137fb8c4b8865d080f602c99c4e2_466x601.png) **示例2:偏移量** ``` <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>定位功能</title> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script src="http://libs.baidu.com/underscore/1.3.3/underscore.js"></script> <style type="text/css"> html,body{ margin: 20px; padding: 20px; border: 10px solid red; height: 2500px; width: auto; } html{ } body{ height: 100%; width: auto; border: 10px solid yellow; /*position: relative;*/ } </style> </head> <body> <style type="text/css"> #box1{ margin: 100px; } #box2{ width: 100px; height:100px; background-color:darkgray; overflow: scroll; /*position: relative;*/ } #box3{ width: 400px; height:400px; background-color: aquamarine; border:5px solid darkred; padding: 20px; margin: 25px; } </style> <div id="box1" style=""> <div id="box2" style=""> <div id="box3" style=""> </div> </div> <button type="button" id="button">點擊</button> </div> <script type="text/javascript"> var button=document.getElementById("button"); button.onclick=function(){ var box2=document.getElementById("box2");//100*100 var box3=document.getElementById("box3");// 400*400 +padding 20px + border 5px + margin 25px //---------滾動條子容器常用----------- //元素的可見寬度(元素內容區+padding) var clientWidth=box3.clientWidth;//440 //元素的整個實際寬度(元素內容區+padding+border) var offsetWidth=box3.offsetWidth;//450 //當前元素針對于其定位父元素的水平偏移量 var offsetLeft=box3.offsetLeft;//205 //當前元素針對于其定位父元素的垂直偏移量 var offsetTop=box3.offsetTop;//205 //元素頂部border的寬度,即border-top-width var clientTop=box3.clientTop;//5 //---------滾動條子容器不常用----------- var box3_scrollWidth=box3.scrollWidth;//440 var box3_scrollLeft=box3.scrollLeft;//0 var box3_scrollTop=box3.scrollTop;//0 console.log("box3.clientWidth："+clientWidth) console.log("box3.offsetWidth："+offsetWidth) console.log("box3.offsetLeft:"+offsetLeft) console.log("box3.offsetTop:"+offsetTop) console.log("box3.clientTop:"+clientTop) console.log("box3.scrollWidth:"+box3_scrollWidth) console.log("box3.scrollLeft:"+box3_scrollLeft) console.log("box3.scrollTop:"+box3_scrollTop) //----------滾動條容器常用---------- //元素的可見寬度(元素內容區+padding) var box2_clientWidth=box2.clientWidth;//83設置的100 但是這里的滾動條寬度有17px //box2元素網頁正文全文高度, 即整個滾動區域的寬度(內容區+padding)： var scrollWidth=box2.scrollWidth;//500 //水平滾動條滾動的距離 var scrollLeft=box2.scrollLeft;//(0 ~ 417) //垂直滾動條滾動的距離 var scrollTop=box2.scrollTop;//(0 ~ 417) //----------滾動條容器不常用---------- var box2_offsetWidth=box2.offsetWidth;//100 var box2_offsetLeft=box2.offsetLeft;//180 var box2_offsetTop=box2.offsetTop;//180 var box2_clientTop=box2.clientTop;//0 console.log("box2.clientWidth:"+box2_clientWidth) console.log("box2.scrollWidth:"+scrollWidth) console.log("box2.scrollLeft:"+scrollLeft) console.log("box2.scrollTop:"+scrollTop) console.log("box2.offsetWidth:"+box2_offsetWidth) console.log("box2.offsetLeft:"+box2_offsetLeft) console.log("box2.offsetTop:"+box2_offsetTop) console.log("box2.clientTop:"+box2_clientTop) if(scrollWidth-scrollLeft==box2_clientWidth){ console.log("水平滾動條滾到底了") } } </script> </body> </html> ``` ![](https://img.kancloud.cn/02/b0/02b0bc4cd65403a53a5828effc8fd6e9_818x435.PNG) ![](https://img.kancloud.cn/8a/b3/8ab3af82decbb53807dbefa4b62285b0_744x427.png) **示例3** ![](https://img.kancloud.cn/b4/f6/b4f6234923f4e57301ac4ca4cbf178a6_809x943.png) ``` <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>定位功能</title> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script src="http://libs.baidu.com/underscore/1.3.3/underscore.js"></script> <style type="text/css"> html,body{ margin: 20px; padding: 20px; border: 10px solid red; height: 2500px; width: auto; } body{ height: 100%; width: auto; border: 10px solid yellow; } #scroll_container{ width:auto; height:1000px; border:1px solid gray; margin: 20px; padding: 20px; border: 10px solid #abc123; overflow: scroll; } #div1{ width: 800px; height: 400px; margin: 20px; padding: 20px; border: 10px solid #f0f; } #div2{ width: 800px; height: 1000px; margin: 20px; padding: 20px; border: 10px solid #600; } </style> </head> <body> <div style="" id="scroll_container"> <div id="div1">div1</div> <div id="div2">div2</div> </div> </body> </html> <script type="text/javascript"> $(document).ready(function(){ $(window).scroll(function(e){ var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; console.log("滾動距離" + scrollTop); }) $("#scroll_container").scroll(function(e){ console.log($("#scroll_container").scrollTop()); }) }) function a(){ document.write( "屏幕分辨率為："+screen.width+"*"+screen.height +"<br />"+ "屏幕可用大小："+screen.availWidth+"*"+screen.availHeight +"<br />"+ "網頁可見區域寬(內容區+padding)："+document.body.clientWidth +"<br />"+ "網頁可見區域高(內容區+padding)："+document.body.clientHeight +"<br />"+ "網頁可見區域寬(內容區+padding+border)："+document.body.offsetWidth +"<br />"+ "網頁可見區域高(內容區+padding+border)："+document.body.offsetHeight +"<br />"+ "網頁正文全文寬(內容區+padding)："+document.body.scrollWidth +"<br />"+ "網頁正文全文高(內容區+padding)："+document.body.scrollHeight +"<br />"+ "網頁被卷去的高："+document.body.scrollTop +"<br />"+ "網頁被卷去的左："+document.body.scrollLeft +"<br />"+ "網頁正文部分上："+window.screenTop +"<br />"+ "網頁正文部分左："+window.screenLeft +"<br />"+ "屏幕分辨率的高："+window.screen.height +"<br />"+ "屏幕分辨率的寬："+window.screen.width +"<br />"+ "屏幕可用工作區高度(不含下方任務欄)："+window.screen.availHeight +"<br />"+ "屏幕可用工作區寬度："+window.screen.availWidth ); }; a(); /* 屏幕分辨率為：1920*1080 屏幕可用大小：1920*1040 網頁可見區域寬(內容區+padding)：623 網頁可見區域高(內容區+padding)：2540 網頁可見區域寬(包括border邊線的寬)：643 網頁可見區域高(包括border邊線的寬)：2560 網頁正文全文寬(內容區+padding)：623 網頁正文全文高(內容區+padding)：2540 網頁被卷去的高：0 網頁被卷去的左：0 網頁正文部分上：6 網頁正文部分左：78 屏幕分辨率的高：1080 屏幕分辨率的寬：1920 屏幕可用工作區高度(不含下方任務欄)：1040 屏幕可用工作區寬度：1920 */ // 800 * 914 //750 * 864 // jquery： // 高 console.log($(window).height()); //瀏覽器當前窗口可視區域高度 914 console.log($(document).height()); //瀏覽器當前窗口文檔的高度 2630 console.log($(document.body).height()); //瀏覽器當前窗口文檔body的高度 2500 console.log($(document.body).outerHeight(true)); //瀏覽器當前窗口文檔body的總高度包括border padding margin 2600 // 寬 console.log($(window).width()); //瀏覽器當前窗口可視區域寬度 783(不包含滾動條) console.log($(document).width()); //瀏覽器當前窗口文檔對象寬度 783 console.log($(document.body).width()); //瀏覽器當前窗口文檔body的寬度 583 console.log($(document.body).outerWidth(true)); //瀏覽器當前窗口文檔body的總寬度包括border padding margin 683 console.log(window.screen.width );//瀏覽設備的分辨率（電腦、手機、平板等） 1920 console.log(window.screen.availWidth );//瀏覽設備的實際可用寬度（電腦、手機、平板等） 1920 console.log(window.innerWidth);//瀏覽器的可用（內部）寬度（包括滾動條等）\[ie不支持\] 800 console.log(document.documentElement.clientWidth || document.body.clientWidth);//瀏覽器實際的可用文檔寬度【兼容ie】 783 console.log($("#div2").height());//(內容區) 1000 console.log($("#div2").innerHeight());//(內容區+padding) 1040 console.log($("#div2").outerHeight());//(內容區+padding+border)1060 console.log($("#div2").offset());//匹配元素在當前視口的相對偏移 {top: 640, left: 160} console.log($("#div2").position());//返回匹配元素相對于父元素的位置（偏移） {top: 610, left: 130} console.log($("#div2").scrollTop());//返回或設置匹配元素的滾動條的垂直位置(匹配的元素必須設置overflow-y: scroll;) 0 console.log($("#div2").scrollLeft());//返回或設置匹配元素的滾動條的水平位置(匹配的元素必須設置overflow-y: scroll;) 0 </script> ``` ## **以下是收集其他作者的總結：** 原文鏈接：http://www.cnblogs.com/lshabest/p/6429219.html **1.對于IE9+、chrome、firefox、Opera、Safari：** window.innerHeight瀏覽器窗口的內部高度； window.innerWidth瀏覽器窗口的內部寬度； **2.對于IE8.7.6.5:** document.documentElement.clientHeight:表示HTML文檔所在窗口的當前高度； document.documentElement.clientWidth:表示HTML文檔所在窗口的當前寬度；或者，因為document對象的body屬性對應HTML文檔的標簽，所以也可表示為： document.body.clientHeight：表示HTML文檔所在窗口的當前高度； document.body.clientWidth：表示HTML文檔所在窗口的當前寬度； **結論：** document.body.clientWidth/Height：的寬高偏小，高甚至默認200； document.documentElement.clientWidth/Height 和 window.innerWidth/Height 的寬高始終相等。所以在不同瀏覽器都實用的的Javascripit方案： **二：網頁正文全文寬高** scrollWidth和scrollHeight獲取網頁內容高度和寬度 **1.針對IE.Opera：** scrollHeight是網頁內容實際高度，可以小于clientHeight; **2.針對NS.firefox：** scrollHeight是網頁內容高度，不過最小值是clientHeight;也就是說網頁內容實際高度小于clientHeight的時候，scrollHeight返回clientHeight； **3.瀏覽器兼容代碼：** **二：網頁可見區域寬高，包括滾動條等邊線（會隨窗口的顯示大小改變）** **1.值：**?? offsetWidth = scrollWidth + 左右滾動條 +左右邊框；　　　　offsetHeight = scrollHeight + 上下滾動條 + 上下邊框； **2.瀏覽器兼容代碼：** **三：網頁卷去的距離與偏移量** **1.scrollLeft:** 設置或獲取位于給定對象左邊界與窗口中目前可見內容的最左端之間的距離； **2.scrollTop:** 設置或獲取位于給定對象最頂端與窗口中目前可見內容的最左端之間的距離； **3.offsetLeft:** 設置或獲取位于給定對象相對于版面或由offsetParent屬性指定的父坐標的計算左側位置； **4.offsetTop:** 設置或獲取位于給定對象相對于版面或由offsetParent屬性指定的父坐標的計算頂端位置；