博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
javascript中top,clientTop,scrollTop,offsetTop用法
阅读量:6928 次
发布时间:2019-06-27

本文共 1768 字,大约阅读时间需要 5 分钟。

hot3.png

网页可见区域宽: 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.οnresize=findDimensions; 
//--> </script> 

转载于:https://my.oschina.net/u/946060/blog/341487

你可能感兴趣的文章
Sql开发技巧
查看>>
TDictionary 是delphi用的,c++builder用起来太吃力。
查看>>
centos安装redis及php-redis扩展
查看>>
[DOM Event Learning] Section 4 事件分发和DOM事件流
查看>>
GBK、UTF8、UNICODE编码转换
查看>>
关于web页面性能测量指标与建议
查看>>
linux tar命令简介
查看>>
GTD时间管理(1)---捕获搜集
查看>>
分享web前端七款HTML5 Loading动画特效集锦
查看>>
HttpWebRequest和HttpWebResponse
查看>>
oracle10g获得Date类型字段无分,秒的解决方案!
查看>>
POJ2029——Get Many Persimmon Trees
查看>>
精彩理发头盔
查看>>
Android基调(十六)- Service:startService()、stopService()、bindService()、unbindService()加...
查看>>
linux 安装jdk
查看>>
ubuntu 编译android 源码笔记
查看>>
ExtJS4.2学习(10)分组表格控件--GroupingGrid(转)
查看>>
【iCore3 双核心板】例程六:IWDG看门狗实验——复位ARM
查看>>
使用AppCompat_v7 21.0.0d的几个兼容问题
查看>>
MODBUS RTU协议中浮点数是如何存储,读到浮点数寄存器的数值如何转换成所需的浮点数...
查看>>