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对象中关于setTimeout和setInterval的this介绍
Jul 21 Javascript
两种方法实现文本框输入内容提示消失
Mar 17 Javascript
JavaScript对象和字串之间的转换实例探讨
Apr 21 Javascript
JS清空多文本框、文本域示例代码
Feb 24 Javascript
使用jquery写个更改表格行顺序的小功能
Apr 29 Javascript
详谈JavaScript内存泄漏
Nov 14 Javascript
Javascript学习笔记之函数篇(五) : 构造函数
Nov 23 Javascript
jquery图片倾斜层叠切换特效代码分享
Aug 27 Javascript
jQuery基础知识点总结(必看)
May 31 Javascript
JavaScript使用forEach()与jQuery使用each遍历数组时return false 的区别
Aug 26 Javascript
vue2.0 如何把子组件的数据传给父组件(推荐)
Jan 15 Javascript
如何修改Vue打包后文件的接口地址配置的方法
Apr 22 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+javascript制作带提示的验证码源码分享
2014/05/28 PHP
详解PHP中的状态模式编程
2015/08/11 PHP
PHP7新特性之抽象语法树(AST)带来的变化详解
2018/07/17 PHP
浅析PHP反序列化中过滤函数使用不当导致的对象注入问题
2020/02/15 PHP
Jquery Autocomplete 结合asp.net使用要点
2010/10/29 Javascript
表单JS弹出填写提示效果代码
2011/04/16 Javascript
JS写的贪吃蛇游戏(个人练习)
2013/07/08 Javascript
JavaScript中反正弦函数Math.asin()的使用简介
2015/06/14 Javascript
对于Javascript 执行上下文的全面了解
2017/09/05 Javascript
动手写一个angular版本的Message组件的方法
2017/12/16 Javascript
微信小程序自定义带价格显示日历效果
2018/12/29 Javascript
Three.js实现3D机房效果
2018/12/30 Javascript
如何实现iframe父子传参通信
2020/02/05 Javascript
vue开发移动端底部导航条功能
2020/04/08 Javascript
jQuery实现移动端扭蛋机抽奖
2020/11/08 jQuery
[26:24]完美副总裁、DOTA2负责人蔡玮专访:电竞如人生
2014/09/11 DOTA
天翼开放平台免费短信验证码接口使用实例
2013/12/18 Python
理解Python中的类与实例
2015/04/27 Python
python编程嵌套函数实例代码
2018/02/11 Python
python实现图片压缩代码实例
2019/08/12 Python
Keras预训练的ImageNet模型实现分类操作
2020/07/07 Python
python3处理word文档实例分析
2020/12/01 Python
python-图片流传输的思路及示例(url转换二维码)
2020/12/21 Python
全球酒店预订网站:Hotels.com
2016/08/10 全球购物
软件缺陷的分类都有哪些
2014/08/22 面试题
感恩节活动方案
2014/01/27 职场文书
音乐教育感言
2014/03/05 职场文书
房屋出租协议书
2014/04/10 职场文书
药剂专业自荐信范文
2014/04/16 职场文书
群教个人对照检查材料
2014/08/20 职场文书
银行求职信范文怎么写
2015/03/20 职场文书
2015年信息宣传工作总结
2015/05/26 职场文书
高中历史教学反思
2016/02/19 职场文书
webpack的移动端适配方案小结
2021/07/25 Javascript
Mysql案例刨析事务隔离级别
2021/09/25 MySQL
react 路由Link配置详解
2021/11/11 Javascript