js的各种宽高获取

最新推荐文章于 2024-11-12 11:19:19 发布

Felicity_Gao

最新推荐文章于 2024-11-12 11:19:19 发布

阅读量342

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/Felicity_Gao/article/details/78487288

版权

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;
　　})