博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js中document.documentElement 和document.body 以及其属性 clientWidth等
阅读量:6681 次
发布时间:2019-06-25

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

在设计页面时可能经常会用到固定层的位置,这就需要获取一些html对象的坐标以更灵活的设置目标层的坐标,这里可能就会用到document .body.scrollTop等属性,但是此属性在xhtml标准网页或者更简单的说是带标签的页面里得到的结果是0,如果不要此标签则一切正常,那么在xhtml页面怎么获得body的坐标呢,当然有办法-使用document .documentElement来取代document .body,可以这样写

例:
var top = document .documentElement.scrollTop || document .body.scrollTop;
在javascript里||是个好东西,除了能用在if等条件判断里,还能用在变量赋值上。那么上例等同于下例。
例:

var top = document .documentElement.scrollTop ? document .documentElement.scrollTop : document .body.scrollTop;

这么写可以得到很好的兼容性。
相反,如果不做声明的话,document .documentElement.scrollTop反而会显示为0。
得到各个属性如下:

 

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

 

scrollHeight: 获取对象的滚动高度。  scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离scrollWidth:获取对象的滚动宽度 offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置  event.clientX 相对文档的水平座标event.clientY 相对文档的垂直座标event.offsetX 相对容器的水平坐标event.offsetY 相对容器的垂直坐标   document .documentElement.scrollTop 垂直方向滚动的值event.clientX+document .documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

要获取当前页面的滚动条纵坐标位置,用:

document .documentElement.scrollTop;

而不是:

document .body.scrollTop;
documentElement 对应的是 html 标签,而 body 对应的是 body 标签。

 

转载地址:http://gvgxo.baihongyu.com/

你可能感兴趣的文章
APP云测试
查看>>
3-unit3 高速缓存DNS
查看>>
spark mllib 协同过滤算法,基于余弦相似度的用户相似度计算
查看>>
openwrt 基于qmi的 3G|4G拨号
查看>>
俞敏洪励志语
查看>>
开源|基于TensorFlow的聊天机器人-ErGo
查看>>
lucene4.0入门1
查看>>
Svn结合hook实现自动更新及多Project管理更新
查看>>
sgu 222
查看>>
让spring-data-jpa解放你的DAO
查看>>
58沈剑:架构师的平凡之路
查看>>
Hibernate问题-read-write缓存策略
查看>>
sql中实现汉字的拼音首字母查询
查看>>
Android 动态布局 (代码布局)
查看>>
MYSQL备份和恢复
查看>>
spark安装:在hadoop YARN上运行spark-shell
查看>>
Docker存储驱动之ZFS简介
查看>>
根据sql,一键生成excle 格式, 再通过 zip包压缩为zip
查看>>
PL/SQL Developer 添加数据
查看>>
PHP实时统计文件下载次数
查看>>