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 相关文章推荐
JS类库Bindows1.3中的内存释放方式分析
Mar 08 Javascript
Jquery跨域获得Json时invalid label错误的解决办法
Jan 11 Javascript
jQuery实现等比例缩放大图片让大图片自适应页面布局
Oct 16 Javascript
node.js中的events.EventEmitter.listenerCount方法使用说明
Dec 08 Javascript
JS实现的倒计时效果实例(2则实例)
Dec 23 Javascript
基于JavaScript实现文字超出部分隐藏
Feb 29 Javascript
微信小程序中用WebStorm使用LESS
Mar 08 Javascript
bootstrap警告框示例代码分享
May 17 Javascript
webstorm+vue初始化项目的方法
Oct 18 Javascript
JavaScript数据结构之栈实例用法
Jan 18 Javascript
vue中使用极验验证码的方法(附demo)
Dec 04 Javascript
vue+echarts实现动态折线图的方法与注意
Sep 01 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程序设计中的MVC编程思想
2014/07/28 PHP
php获取本周星期一具体日期的方法
2015/04/20 PHP
Laravel中9个不经常用的小技巧汇总
2019/04/16 PHP
一款jquery特效编写的大度宽屏焦点图切换特效的实例代码
2013/08/05 Javascript
javascript+HTML5的Canvas实现Lab单车动画效果
2015/08/07 Javascript
JavaScript 链式结构序列化详解
2016/09/30 Javascript
angularJS 指令封装回到顶部示例详解
2017/01/22 Javascript
js canvas实现简单的图像扩散效果
2020/06/28 Javascript
在js代码拼接dom对象到页面上的模板总结
2018/10/21 Javascript
vue2 拖动排序 vuedraggable组件的实现
2019/08/08 Javascript
解决layer 关闭当前弹窗 关闭遮罩层 input值获取不到的问题
2019/09/25 Javascript
javascript的hashCode函数实现代码小结
2020/08/11 Javascript
微信小程序自定义yPicker组件实现省市区三级联动功能
2020/10/29 Javascript
[58:21]DOTA2亚洲邀请赛 4.3 突围赛 Liquid vs VGJ.T 第二场
2018/04/04 DOTA
[03:08]迎霜节狂欢!2018年迎霜节珍藏Ⅰ一览
2018/12/25 DOTA
Python实现复杂对象转JSON的方法示例
2017/06/22 Python
基于python神经卷积网络的人脸识别
2018/05/24 Python
python pandas.DataFrame选取、修改数据最好用.loc,.iloc,.ix实现
2018/06/11 Python
解决Python一行输出不显示的问题
2018/12/03 Python
Python制作词云图代码实例
2019/09/09 Python
python使用Windows的wmic命令监控文件运行状况,如有异常发送邮件报警
2021/01/30 Python
Maisons du Monde德国:法国家具和装饰的市场领导者
2019/07/26 全球购物
Laravel的加密解密与哈希实例讲解
2021/03/24 PHP
趣味比赛活动方案
2014/02/15 职场文书
聚美优品的广告词
2014/03/14 职场文书
《动手做做看》教学反思
2014/04/09 职场文书
护士演讲稿优秀范文
2014/04/30 职场文书
年度安全生产目标责任书
2014/07/23 职场文书
党的群众路线教育实践活动个人对照检查材料范文
2014/09/25 职场文书
乐山大佛导游词
2015/02/02 职场文书
德能勤绩廉个人总结
2015/02/14 职场文书
收入证明怎么写
2015/06/12 职场文书
教育读书笔记
2015/07/02 职场文书
妇联2016年六一国际儿童节活动总结
2016/04/06 职场文书
MySQL系列之一 MariaDB-server安装
2021/07/02 MySQL
SpringBoot集成Redis的思路详解
2021/10/16 Redis