JavaScript网页定位详解


Posted in Javascript onJanuary 13, 2014

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

HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
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 相对文档的水平座标+垂直方向滚动的量

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

(需要提一下:CSS中的margin属性,与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)

=====================================================

昨天给项目中的一些页面更换了版式,更换完毕后发现一些js不好使了。通过document.documentElement.clientWidth这样的语句获得的页面宽度为0 。经过一番google,才知道是新页面上缺少了对W3C标准的引用,导致document.documentElement.clientWidth失效:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

如果在页面中添加这行标记的话

在IE中:
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度

在FireFox中
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度

在Opera中:
document.body.clientWidth ==> 可见区域宽度
document.body.clientHeight ==> 可见区域高度
document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)
document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)
而如果没有定义W3C的标准,则

IE为:
document.documentElement.clientWidth ==> 0
document.documentElement.clientHeight ==> 0

FireFox为:
document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)

Opera为:

document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)

Javascript 相关文章推荐
jQuery选择没有colspan属性的td的代码
Jul 06 Javascript
js或者jquery判断图片是否加载完成实现代码
Mar 20 Javascript
jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
Apr 24 Javascript
jQuery移除元素自动解绑事件实现思路及代码
May 31 Javascript
浅谈js 闭包引起的内存泄露问题
Jun 22 Javascript
jQuery+PHP+MySQL二级联动下拉菜单实例讲解
Oct 27 Javascript
jQuey将序列化对象在前台显示地实现代码(方法总结)
Dec 13 Javascript
详解如何构建Angular项目目录结构
Jul 13 Javascript
解决layui动态添加的元素click等事件触发不了的问题
Sep 20 Javascript
解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题
Jul 28 Javascript
适用于 Vue 的播放器组件Vue-Video-Player操作
Nov 16 Javascript
Vue鼠标滚轮滚动切换路由效果的实现方法
Aug 04 Vue.js
js菜单点击显示或隐藏效果的简单实例
Jan 13 #Javascript
ie8本地图片上传预览示例代码
Jan 12 #Javascript
js 立即调用的函数表达式如何写
Jan 12 #Javascript
IE的事件传递-event.cancelBubble示例介绍
Jan 12 #Javascript
Javascript实现带关闭按钮的网页漂浮广告代码
Jan 12 #Javascript
jquery toolbar与网页浮动工具条具体实现代码
Jan 12 #Javascript
jQuery在iframe中无法弹出对话框的解决方法
Jan 12 #Javascript
You might like
php中的MVC模式运用技巧
2007/05/03 PHP
Windows下的PHP安装文件线程安全和非线程安全的区别
2014/04/23 PHP
PHPExcel实现表格导出功能示例【带有多个工作sheet】
2018/06/13 PHP
一个可以显示阴历的JS代码
2007/03/05 Javascript
js tab 选项卡
2009/04/26 Javascript
关于hashchangebroker和statehashable的补充文档
2011/08/08 Javascript
jquery、js操作checkbox全选反选
2014/03/12 Javascript
jquery获取当前日期的方法
2015/01/14 Javascript
基于ajax实现文件上传并显示进度条
2015/08/03 Javascript
jQuery实现Select左右复制移动内容
2016/08/05 Javascript
详谈Angular路由与Nodejs路由的区别
2017/03/05 NodeJs
详解angular ui-grid之过滤器设置
2017/06/07 Javascript
js数组方法reduce经典用法代码分享
2018/01/07 Javascript
React如何避免重渲染
2018/04/10 Javascript
Koa代理Http请求的示例代码
2018/10/10 Javascript
JavaScript 实现自己的安卓手机自动化工具脚本(推荐)
2020/05/13 Javascript
vue 导出文件,携带请求头token操作
2020/09/10 Javascript
如何利用node转发请求详解
2020/09/17 Javascript
[47:46]完美世界DOTA2联赛 Magma vs GXR 第三场 11.07
2020/11/10 DOTA
python数据预处理之将类别数据转换为数值的方法
2017/07/05 Python
python版大富翁源代码分享
2018/11/19 Python
Django模型序列化返回自然主键值示例代码
2019/06/12 Python
python如何将两个txt文件内容合并
2019/10/18 Python
python实现删除列表中某个元素的3种方法
2020/01/15 Python
Python爬虫实现模拟点击动态页面
2020/03/05 Python
django 利用Q对象与F对象进行查询的实现
2020/05/15 Python
Manjaro、pip、conda更换国内源的方法
2020/11/17 Python
python 将html转换为pdf的几种方法
2020/12/29 Python
顺丰快递Java软件工程师面试题
2015/07/31 面试题
运动会解说词200字
2014/02/06 职场文书
社区消防工作实施方案
2014/03/21 职场文书
货物运输服务质量承诺书
2014/05/29 职场文书
机关党建工作汇报材料
2014/08/20 职场文书
写给老婆的保证书
2015/02/27 职场文书
MySQL中出现乱码问题的终极解决宝典
2021/05/26 MySQL
一篇文章搞懂python混乱的切换操作与优雅的推导式
2021/08/23 Python