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 相关文章推荐
如何做到打开一个页面,过几分钟自动转到另一页面
Apr 20 Javascript
各种常用的JS函数整理
Oct 25 Javascript
Javascript中引用示例介绍
Feb 21 Javascript
javascript使用call调用微信API
Dec 15 Javascript
JavaScript Function函数类型介绍
Apr 08 Javascript
easyui tree带checkbox实现单选的简单实例
Nov 07 Javascript
vue货币过滤器的实现方法
Apr 01 Javascript
通过vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题
Apr 08 Javascript
JavaScript实现点击出现图片并统计点击次数功能示例
Jul 23 Javascript
Node.js实现简单的爬取的示例代码
Jun 25 Javascript
详解vue 命名视图
Aug 14 Javascript
layui 解决富文本框form表单提交为空的问题
Oct 26 Javascript
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更改目录及子目录下所有的文件后缀扩展名的代码
2010/10/12 PHP
PHP实现的无限分类类库定义与用法示例【基于thinkPHP】
2018/08/06 PHP
javascript 文档的编码问题解决
2009/03/01 Javascript
JavaScript中出现乱码的处理心得
2009/12/24 Javascript
Extjs学习笔记之九 数据模型(上)
2010/01/11 Javascript
JS动态修改图片的URL(src)的方法
2015/04/01 Javascript
jQuery使用getJSON方法获取json数据完整示例
2016/09/13 Javascript
jQuery中的100个技巧汇总
2016/12/15 Javascript
基于JavaScript实现评论框展开和隐藏功能
2017/08/25 Javascript
JS解决IOS中拍照图片预览旋转90度BUG的问题
2017/09/13 Javascript
mpvue跳转页面及注意事项
2018/08/03 Javascript
vue router 通过路由来实现切换头部标题功能
2019/04/24 Javascript
微信小程序上传文件到阿里OSS教程
2019/05/20 Javascript
JS根据json数组多个字段排序及json数组常用操作
2019/06/06 Javascript
vue webpack重写cookie路径的方法
2019/07/10 Javascript
Node.js Domain 模块实例详解
2020/03/18 Javascript
[07:20]2014DOTA2西雅图国际邀请赛 选手讲解积分赛第二天
2014/07/11 DOTA
Python3一行代码实现图片文字识别的示例
2018/01/15 Python
ubuntu系统下使用pm2设置nodejs开机自启动的方法
2018/05/12 NodeJs
在Pandas中处理NaN值的方法
2019/06/25 Python
Python绘图实现显示中文
2019/12/04 Python
Python面向对象之多态原理与用法案例分析
2019/12/30 Python
使用Pycharm(Python工具)新建项目及创建Python文件的教程
2020/04/26 Python
python计算auc的方法
2020/09/09 Python
Django创建一个后台的基本步骤记录
2020/10/02 Python
html5 桌面提醒:Notifycations应用介绍
2012/11/27 HTML / CSS
高清屏下canvas重置尺寸引发的问题的解决
2019/10/14 HTML / CSS
Aveda美国官网:天然护发产品、洗发水、护发素和沙龙
2016/12/09 全球购物
来自世界上最好大学的在线课程:edX
2018/10/16 全球购物
英国蛋糕装饰用品一站式商店:Craft Company
2019/03/18 全球购物
婚礼证婚人演讲稿
2014/09/13 职场文书
2014年教学工作总结
2014/11/13 职场文书
肖申克的救赎观后感
2015/06/02 职场文书
呐喊读书笔记
2015/06/30 职场文书
配置nginx 重定向到系统维护页面
2021/06/08 Servers
Java常用函数式接口总结
2021/06/29 Java/Android