文档章节

javascript中top,clientTop,scrollTop,offsetTop用法

山鹰sniper
 山鹰sniper
发布于 2014/11/06 15:21
字数 283
阅读 275
收藏 9


网页可见区域宽: 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;

//**************************************************************************
IE,FireFox 差异如下: 

IE6.0、FF1.06+: 

clientWidth = width + padding 

clientHeight = height + padding 

offsetWidth = width + padding + border 

offsetHeight = height + padding + border 

IE5.0/5.5: 
clientWidth = width - border 

clientHeight = height - border 

offsetWidth = width 

offsetHeight = height 


<script type="text/javascript"> 
<!-- var winWidth = 0;  
var winHeight = 0;  
function findDimensions() //函数:获取尺寸  
{  //获取窗口宽度  
if (window.innerWidth)  
winWidth = window.innerWidth;  
else if ((document.body) && (document.body.clientWidth))  
winWidth = document.body.clientWidth;  //获取窗口高度  
if (window.innerHeight)  
winHeight = window.innerHeight;  
else if ((document.body) && (document.body.clientHeight))  
winHeight = document.body.clientHeight;  //通过深入Document内部对body进行检测,获取窗口大小  
if (document.documentElement  && document.documentElement.clientHeight && document.documentElement.clientWidth)  
{  
winHeight = document.documentElement.clientHeight;  
winWidth = document.documentElement.clientWidth;  
}  //结果输出至两个文本框  
document.form1.availHeight.value= winHeight;  
document.form1.availWidth.value= winWidth;  
}  findDimensions();  //调用函数,获取数值  
window.onresize=findDimensions; 
//--> </script> 

本文转载自:http://www.cnblogs.com/Fooo/archive/2009/08/13/1545596.html

山鹰sniper
粉丝 4
博文 84
码字总数 28663
作品 0
南开
程序员
私信 提问
js中clientHeight,offsetHeight,scrollHeight的区别

一 clientHeight,offsetHeight,scrollHeight的区别   clientHeight在各个浏览器中基本是一样的,一致认为是内容可视区域的高度,也就是说页面浏览器中可以看到内容的这个区域的高度,不包括...

自由小鸟
2018/05/31
79
0
Js中 关于top、clientTop、scrollTop、offsetTop的用法

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

紫地瓜
2012/11/05
250
0
整理获取 viewport 和 element 尺寸和位置方法

整理获取 viewport 和 element 尺寸和位置方法 ⭐️ 更多前端技术和知识点,搜索订阅号 订阅 视口页面或窗口的位置和宽高 获取视口宽高 下面方法是包括滚动条的宽高,不支持 IE8 另外 outerW...

JS菌
04/14
0
0
轻松弄清JavaScript中的offset、scroll、client

初次见到这张图,觉得好乱额,所以下面我们来慢慢理顺这个东西。 一、理顺offset 在这里我们可以看到,关于offset共有5个东西需要弄清楚:   1、offsetParent   2、offsetTop   3、off...

longteng2013
2013/10/06
4K
2
高性能CSS3动画

高性能 CSS3 动画 高性能移动Web相较PC的场景需要考虑的因素也相对更多更复杂,我们总结为以下几点: 流量、功耗与流畅度。 在PC时代我们更多的是考虑体验上的流畅度,而在Mobile端本身丰富的...

陈文亮
2015/03/01
9
0

没有更多内容

加载失败,请刷新页面

加载更多

58. 静态工厂方法

参考:https://www.jianshu.com/p/ceb5ec8f1174 https://www.jianshu.com/p/fa15f63d399a 1.定义 用一个静态方法来对外提供自身实例的方法,即为我们所说的静态工厂方法(Static factory met...

20190513
8分钟前
4
0
Mybatis之StatementHandler

mybatis-3.4.6.release. 图1 StatementHandler是对CallableStatement、PreparedStatement、Statement的统一封装,在JDK中CallableStatement继承PreparedStatement,PreparedStatement继承Sta......

克虏伯
27分钟前
5
0
遇到API安全问题怎么办?F5 API加固解决方案怎么样?

  在各种APP泛滥的现在,背后都有同样泛滥的API接口在支撑,其中鱼龙混杂,直接裸奔的WEB API大量存在,安全性令人堪优在以前都采用自已定义的接口和结构,对于公开访问的接口,专业点的都会做...

梅丽莎好
50分钟前
10
0
迁Aliyun Redis踩坑之路 - 实践总结

背景: 从自建 redis(CacheCloud)到迁移到 aliyun redis 1. 踩“坑”一 问题: 平常小伙伴们在项目中可能用到redis key expire nofity的场景(比如:处理延时任务等),但是发现迁移后 ke...

少年与海
今天
3
0
干货:Kibana 可视化ElasticSearch数据展示分析

当你把数据存入ES中后,怎么更方面的查看这些数据,还想用不同的维度去看这些数据,是不是纠结,不能再专门搞个后台显示把。这里有神器 Kibana 专门干这个事情的,可以帮你把ES中的数据,通过...

枕邊書
今天
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部