JAVASCRIPT
VUE
REACT
NODE
ES6
TYPESCRIPT

获取页面元素各种宽高

2022. 06. 07    

获取页面元素各种宽高

基础方法

网页可见区域宽: document.body.clientWidth;

网页可见区域高: document.body.clientHeight;

网页可见区域宽: document.body.offsetWidth (包括边线的宽);

网页可见区域高: document.body.offsetHeight(包括边线的宽);

网页正文全文宽: document.body.scrollWidth;

网页正文全文高: document.body.scrollHeight;

网页被卷去的高: document.body.scrollTop;

网页被卷去的左: document.body.scrollLeft;

网页正文部分上: window.screenTop;

网页正文部分左: window.screenLeft;

屏幕分辨率的高: window.screen.height;

屏幕分辨率的宽: window.screen.width;

屏幕可用工作区高度: window.screen.availHeight;

屏幕可用工作区宽度: window.screen.availWidth;

窗口可视区域高度: window.innerHeight;

窗口可视区域宽度: window.innerWidth;

function testClick(oDiv){ 
  var oDivId=document.getElementById(oDiv); 
  console.log("offsetHeight:"+oDivId.offsetHeight+"\n offsetWidth:"+oDivId.offsetWidth+"\n offsetLeft:"+oDivId.offsetLeft+"\n offsetRight:"+oDivId.offsetLeft+"\n offsetTop:"+oDivId.offsetTop 
  +"\n offsetParent:"+oDivId.offsetParent +"\n scrollHeight:"+oDivId.scrollHeight+"\n scrollWidth:"+oDivId.scrollWidth+"\n scrollTop:"+oDivId.scrollTop+"\n scrollLeft:"+oDivId.scrollLeft+"\n " ); 
  } 
  testClick('ss')