js的各种宽高获取

来源：互联网发布：vnr显示无法连接网络编辑：程序博客网时间：2024/05/29 08:41

documentElement 和 body 相关说明（一般用于兼容处理）：

body是DOM对象里的body子节点，即 <body> 标签；  //一般IE7以下documentElement 是整个节点树的根节点root，即<html> 标签； //一般w3c

chrom模式下

document.body.clientHeight;      document.body.scrollHeight;     //->   这三个都会返回文档的大小document.body.offsetHeight;

document.documentElement.clientHeight;    //->   视口的大小document.documentElement.scrollHeight;    //->   文档的大小document.documentElement.offsetHeight;    //->   文档的大小

window.screenTop;  //浏览器窗口距离屏幕的高度，个浏览器有差异，一般不用就不研究了                  //firefox：没有screenLeft和screenTop属性，但有同义属性screenX和screenY整个浏览器相对于主显示器屏幕的位置最大化时会是负值

document.body.scrollTop;  //滚动条滚动后被隐藏的页面的高度window.screen.height;  //整个屏幕的高，window.screen.availHeight;   //除去菜单栏

获取页面元素距离浏览器工作区顶端的距离

页面元素距离浏览器工作区顶端的距离 = 元素距离文档顶端偏移值 - 网页被卷起来的高度即：

DOM元素对象.offsetTop  -  document.documentElement.scrollTop

JQuery:　

$(document).ready(function(){　　console.log($(window).height()); //浏览器当前窗口可视区域高度　　console.log($(document).height()); //浏览器当前窗口文档的高度　　console.log($(document.body).height());//浏览器当前窗口文档body的高度　　console.log($(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度 包括border padding margin　　console.log($(window).width()); //浏览器当前窗口可视区域宽度　　console.log($(document).width());//浏览器当前窗口文档对象宽度　　console.log($(document.body).width());//浏览器当前窗口文档body的宽度　　console.log($(document.body).outerWidth(true));//当前窗口的总宽度 包括border padding margin　  jq对象.offset().top;　  jq对象.offset().left;　　})

阅读全文

0 0