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 相关文章推荐
JavaScript Date对象 日期获取函数
Dec 19 Javascript
如何使用jquery动态加载js,css文件实现代码
Apr 03 Javascript
javascript unicode与GBK2312(中文)编码转换方法
Nov 14 Javascript
JavaScript判断变量是否为空的自定义函数分享
Jan 31 Javascript
javascript使用shift+click实现选择和反选checkbox的方法
May 04 Javascript
JavaScript中的getDay()方法使用详解
Jun 09 Javascript
Jquery判断form表单数据是否变化
Mar 30 Javascript
jquery获取select,option所有的value和text的实例
Mar 06 Javascript
JavaScript Drum Kit 指南(纯 JS 模拟敲鼓效果)
Jul 23 Javascript
Node.js学习之地址解析模块URL的使用详解
Sep 28 Javascript
vue2.0 实现导航守卫(路由守卫)
May 21 Javascript
vue 中 beforeRouteEnter 死循环的问题
Apr 23 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学习笔记 数组的常用函数
2011/06/13 PHP
PHP 根据key 给二维数组分组
2016/12/09 PHP
TP5框架实现的数据库备份功能示例
2020/04/05 PHP
Javascript类库的顶层对象名用户体验分析
2010/10/24 Javascript
js 幻灯片的实现
2011/12/06 Javascript
javascript模拟订火车票和退票示例
2014/04/24 Javascript
学习javascript面向对象 javascript实现继承的方式
2016/01/04 Javascript
浅析JS获取url中的参数实例代码
2016/06/14 Javascript
AngularJS中的API(接口)简单实现
2016/07/28 Javascript
Js得到radiobuttonlist选中值的两种方法(推荐)
2016/08/25 Javascript
Jquery循环截取字符串的方法(多出的字符串处理成&quot;...&quot;)
2016/11/28 Javascript
JS 实现计算器详解及实例代码(一)
2017/01/08 Javascript
Bootstrap 表单验证formValidation 实现表单动态验证功能
2017/05/17 Javascript
JavaScript实现省份城市的三级联动
2020/02/11 Javascript
基于JavaScript实现大文件上传后端代码实例
2020/08/18 Javascript
Python使用urllib模块的urlopen超时问题解决方法
2014/11/08 Python
python标准算法实现数组全排列的方法
2015/03/17 Python
VSCode下好用的Python插件及配置
2018/04/06 Python
Python 爬取携程所有机票的实例代码
2018/06/11 Python
Python基于Logistic回归建模计算某银行在降低贷款拖欠率的数据示例
2019/01/23 Python
python字典一键多值实例代码分享
2019/06/14 Python
python实现最大优先队列
2019/08/29 Python
python GUI库图形界面开发之PyQt5信号与槽基础使用方法与实例
2020/03/06 Python
python3 正则表达式基础廖雪峰
2020/03/25 Python
python库skimage给灰度图像染色的方法示例
2020/04/27 Python
Python OrderedDict字典排序方法详解
2020/05/21 Python
日本卡普空电视游戏软件公司官方购物网站:e-CAPCOM
2018/07/17 全球购物
函授本科自我鉴定
2013/11/03 职场文书
优秀教师先进材料
2014/12/16 职场文书
钱塘江大潮导游词
2015/02/03 职场文书
试用期旷工辞退通知书
2015/04/17 职场文书
教师节倡议书2015
2015/04/27 职场文书
新学期感想
2015/08/10 职场文书
2016大学生国家助学贷款承诺书
2016/03/25 职场文书
Mysql中where与on的区别及何时使用详析
2021/08/04 MySQL
Grafana可视化监控系统结合SpringBoot使用
2022/04/19 Redis