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 相关文章推荐
获取DOM对象的几种扩展及简写
Oct 09 Javascript
JavaScript 字符串连接性能优化
Dec 20 Javascript
JavaScript 开发规范要求(图文并茂)
Jun 11 Javascript
jquery 跳到顶部和底部动画2句代码简单实现
Jul 18 Javascript
jQuery 获取和设置select下拉框的值实现代码
Nov 08 Javascript
js从Cookies里面取值的简单实现
Jun 30 Javascript
js使用removeChild方法动态删除div元素
Aug 01 Javascript
JS 终止执行的实现方法
Nov 24 Javascript
JavaScript函数参数的传递方式详解
Mar 06 Javascript
jquery在启动页面时,自动加载数据的实例
Jan 22 jQuery
详解React中setState回调函数
Jun 14 Javascript
layui表格内容溢出的解决方法
Sep 06 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源码之 ext/mysql扩展部分
2009/07/17 PHP
thinkphp区间查询、统计查询与SQL直接查询实例分析
2014/11/24 PHP
php读取mssql的ntext字段返回值为空的解决方法
2014/12/30 PHP
php计算多维数组中所有值总和的方法
2015/06/24 PHP
PHP实现的获取文件mimes类型工具类示例
2018/04/08 PHP
jquery创建并行对象或者合并对象的实现代码
2012/10/10 Javascript
jquery固定底网站底部菜单效果
2013/08/13 Javascript
js获取视频时长代码
2014/04/10 Javascript
JS检测页面中哪个HTML标签触发点击事件的方法
2016/06/17 Javascript
Google 地图API Map()构造器详解
2016/08/06 Javascript
真正好用的js验证上传文件大小的简单方法
2016/10/27 Javascript
Vue.js结合Ueditor富文本编辑器的实例代码
2017/07/11 Javascript
vue-router2.0 组件之间传参及获取动态参数的方法
2017/11/10 Javascript
详解使用vuex进行菜单管理
2017/12/21 Javascript
让你5分钟掌握9个JavaScript小技巧
2018/06/09 Javascript
JavaScript原型链与继承操作实例总结
2018/08/24 Javascript
基于Angularjs-router动态改变Title值的问题
2018/08/30 Javascript
Vue 实现列表动态添加和删除的两种方法小结
2018/09/07 Javascript
vue-cli3.0 环境变量与模式配置方法
2018/11/08 Javascript
构建一个JavaScript插件系统
2020/10/20 Javascript
[33:09]完美世界DOTA2联赛循环赛 Forest vs DM BO2第二场 10.29
2020/10/29 DOTA
Python 分析Nginx访问日志并保存到MySQL数据库实例
2014/03/13 Python
Python实现的二维码生成小软件
2014/07/11 Python
Windows下的Python 3.6.1的下载与安装图文详解(适合32位和64位)
2018/02/21 Python
Python实现利用163邮箱远程关电脑脚本
2018/02/22 Python
python中的数组赋值与拷贝的区别详解
2019/11/26 Python
Python 动态变量名定义与调用方法
2020/02/09 Python
基于python实现上传文件到OSS代码实例
2020/05/09 Python
基于Python实现体育彩票选号器功能代码实例
2020/09/16 Python
HTML5中语义化 b 和 i 标签
2008/10/17 HTML / CSS
DELPHI中如何调用API,可举例说明
2014/01/16 面试题
工程班组长岗位职责
2013/12/30 职场文书
母亲七十大寿答谢词
2014/01/18 职场文书
二人合伙经营协议书
2014/09/13 职场文书
新郎接新娘保证书
2015/05/08 职场文书
Python OpenCV超详细讲解读取图像视频和网络摄像头
2022/04/02 Python