js中document.documentElement 和document.body 以及其属性 clientWidth等
在设计页面时可能经常会用到固定层的位置,这就需要获取一些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 标签。
转载于:https://www.cnblogs.com/renfanzi/p/5663472.html
js中document.documentElement 和document.body 以及其属性 clientWidth等相关推荐
- 转document.documentElement和document.body的区别
网页中获取滚动条卷去部分的高度,可以通过 document.body.scrollTop 来获取,比如使div跟着滚动条滚动: 转至:http://www.cnblogs.com/ckmouse/ar ...
- document.documentElement和document.body的区别
网页中获取滚动条卷去部分的高度,可以通过 document.body.scrollTop 来获取,比如使div跟着滚动条滚动: <div id="div" style=&qu ...
- 再谈 document.documentElement 与 document.body 的 scrollWidth、offsetWidth、clientWidth
(scrollHeight.offsetHeight.clientHeight 同样可按本文去理解.) 这是一个很复杂的问题,让我们想像一下: document.documentElement.scr ...
- document.documentElement与document.body
写前端时遇到这两种方法,转载待以后查看. 两种特殊的文档属性可用来访问根节点: document.documentElement document.body 第一个属性可返回存在于 XML 以及 HT ...
- Three.js中自定义控制几何体的点和面的属性
场景 Three.js中引入dat.gui库实现界面组件控制动画速度变量: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/1193 ...
- js中,清空对象(删除对象的属性)
在项目中,有些对象用完后需要重置,下面简单介绍下JS中清除对象的方法.方法如下: 方法一:字面量定义对象 第一步,定义一个空对象并打印出来,代码和效果: 代码: const student = {}; ...
- js中DOM, DOCUMENT, BOM, WINDOW 区别
全栈工程师开发手册 (作者:栾鹏) js系列教程6-BOM操作全解 js系列教程7-DOM操作全解 js中DOM, DOCUMENT, BOM, WINDOW 区别 DOM 全称是 Document ...
- document.body、document.documentElement和window获取视窗大小的区别
来源:http://www.ido321.com/906.html 在w3school关于window对象的介绍中,介绍了获取浏览器窗口大小的三种方法(浏览器的视口,不包括工具栏和滚动条). 对于In ...
- document.documentElement.scrollTop
获取滚动条位置:document.documentElement.scrollTop 获取当前页面的滚动条纵坐标位置:document.documentElement.scrollTop; 而不是:d ...
最新文章
- 在EXCEL中怎么将多个CSV文件合并成一个文件
- java 图像采集_JAVA B/S通过摄像头采集图片信息解决方案。
- php分层怎么实现,mvc-PHP如何做到分层开发?
- Centos-移动文件或目录-mv
- Quartz 2D编程笔记
- leetcode875.KokoEatingBananas
- java+登录window域认证网页_Java 如何用 token 做用户登录认证
- 深度学习必备的几款流行网络与数据集
- BST B-树 B+树 B*树简介
- 苹果手机怎么打印wps文档_苹果手机WPS怎么打印?
- OMS订单管理系统框架图
- 证伪主义 | A Little Sight of Falsification
- 爬虫是什么,该如何学习爬虫呢?
- 1、Django项目设计与搭配开发环境
- [pat乙]1032 挖掘机技术哪家强
- 即将步入研究生,有什么建议?
- 幻月大陆辅助多开挂机攻略
- 数字电路设计之Leon系列处理器结构
- 使用DL4J读取词向量并计算语义相似度
- 佳能hdr_(摄影后期)在佳能DPP中制造HDR,改善照片画质转载
热门文章
- 移动端实时3D目标检测,谷歌开源出品,安卓下载就能用
- 零基础入门深度学习 | 第二章:线性单元和梯度下降
- 熵值法确定权重(matlab附代码)
- 关于Arcgis工作空间的记忆点
- qt 使用插件astyle_astyle使用基础教程
- orm设置bool型 python_Python SQLAlchemy入门教程
- 好的领导应该是什么脾气
- 画出计算机网络的一般组成,计算机网络习题(有答案).pdf
- linux静态网络ip dns怎么设置,Linux下如何配置静态IP设置DNS和主机名?
- 使用php进行后台开发,PHP后台开发用到的基础方法整理【原创】