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下的Live方法和$.browser方法使用代码
Jun 02 Javascript
JavaScript异步编程:异步数据收集的具体方法
Aug 19 Javascript
javascript比较两个日期的先后示例代码
Dec 31 Javascript
JS+CSS实现带有碰撞缓冲效果的竖向导航条代码
Sep 15 Javascript
jQuery如何封装输入框插件
Aug 19 Javascript
JavaScript实现动态添加Form表单元素的方法示例
Aug 14 Javascript
vuex 项目结构目录及一些简单配置介绍
Apr 08 Javascript
webuploader实现上传图片到服务器功能
Aug 16 Javascript
100行代码实现一个vue分页组功能
Nov 06 Javascript
JS实现二维数组元素的排列组合运算简单示例
Jan 28 Javascript
微信小程序rich-text富文本用法实例分析
May 20 Javascript
5种方法告诉你如何使JavaScript 代码库更干净
Sep 15 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 CodeBase:将时间显示为&quot;刚刚&quot;&quot;n分钟/小时前&quot;的方法详解
2013/06/06 PHP
PHP中上传多个文件的表单设计例子
2014/11/19 PHP
PHP实现懒加载的方法
2015/03/07 PHP
微信支付PHP SDK之微信公众号支付代码详解
2015/12/09 PHP
php中输出json对象的值(实现方法)
2018/03/07 PHP
详解php curl带有csrf-token验证模拟提交方法
2018/04/18 PHP
javascript 闭包
2011/09/15 Javascript
javascript权威指南 学习笔记之javascript数据类型
2011/09/24 Javascript
20款非常优秀的 jQuery 工具提示插件 推荐
2012/07/15 Javascript
httpclient模拟登陆具体实现(使用js设置cookie)
2013/12/11 Javascript
jQuery侧边栏实现代码
2016/05/06 Javascript
JS把内容动态插入到DIV的实现方法
2016/07/19 Javascript
jQuery 特性操作详解及实例代码
2016/09/29 Javascript
javascript iframe跨域详解
2016/10/26 Javascript
原生JavaScript实现remove()和recover()功能示例
2018/07/24 Javascript
vue 组件中使用 transition 和 transition-group实现过渡动画
2019/07/09 Javascript
解决layui轮播图有数据不显示的情况
2019/09/16 Javascript
Vue实现PC端靠边悬浮球的代码
2020/05/09 Javascript
JS制作简易计算器的实例代码
2020/07/04 Javascript
JavaScript函数柯里化实现原理及过程
2020/12/02 Javascript
Python列表(list)、字典(dict)、字符串(string)基本操作小结
2014/11/28 Python
Python聚类算法之凝聚层次聚类实例分析
2015/11/20 Python
redis之django-redis的简单缓存使用
2018/06/07 Python
Python从list类型、range()序列简单认识类(class)【可迭代】
2019/05/31 Python
python绘制直方图和密度图的实例
2019/07/08 Python
Atom Python 配置Python3 解释器的方法
2019/08/28 Python
TensorFlow tensor的拼接实例
2020/01/19 Python
Python面向对象实现方法总结
2020/08/12 Python
详解HTML5 canvas绘图基本使用方法
2018/01/29 HTML / CSS
公司面试感谢信
2014/02/01 职场文书
犯错检讨书
2014/02/21 职场文书
护校行动方案
2014/05/31 职场文书
民主生活会对照检查材料范文
2014/10/01 职场文书
2014工程部年度工作总结
2014/12/17 职场文书
企业培训简报范文
2015/07/20 职场文书
村官2015年度工作总结
2015/10/14 职场文书