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编码的几个方法详细介绍
Jan 06 Javascript
HTTP 304错误的详细讲解
Nov 13 Javascript
JS实现局部选择打印和局部不选择打印
Apr 03 Javascript
用JavaScript实现一个代码简洁、逻辑不复杂的多级树
May 23 Javascript
jQuery在线选座位插件seat-charts特效代码分享
Aug 27 Javascript
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
Apr 02 jQuery
javascript中mouseenter与mouseover的异同
Jun 06 Javascript
Javascript实现一朵从含苞到绽放的玫瑰
Mar 30 Javascript
Vue v-for循环之@click点击事件获取元素示例
Nov 09 Javascript
js 图片懒加载的实现
Oct 21 Javascript
VueCli生产环境打包部署跨域失败的解决
Nov 13 Javascript
vue-cli3.x配置全局的scss的时候报错问题及解决
Apr 30 Vue.js
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/05/18 PHP
php仿QQ验证码的实例分析
2013/07/01 PHP
php中OR与|| AND与&amp;&amp;的区别总结
2013/10/26 PHP
php设置静态内容缓存时间的方法
2014/12/01 PHP
js form action动态修改方法
2008/11/04 Javascript
jQuery 菜单随滚条改为以定位方式(固定要浏览器顶部)
2012/05/24 Javascript
基于Unit PNG Fix.js有时候在ie6下不正常的解决办法
2013/06/26 Javascript
jQery使网页在显示器上居中显示适用于任何分辨率
2014/06/09 Javascript
基于javascript简单实现对身份证校验
2021/01/25 Javascript
一款简单的jQuery图片标注效果附源码下载
2016/03/22 Javascript
Bootstrap实现的经典栅格布局效果实例【附demo源码】
2017/03/30 Javascript
JS使用正则表达式找出最长连续子串长度
2017/10/26 Javascript
微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】
2017/12/05 Javascript
jquery 回调操作实例分析【回调成功与回调失败的情况】
2019/09/27 jQuery
Javascript如何实现双指控制图片功能
2020/02/25 Javascript
Python SQLite3数据库操作类分享
2014/06/10 Python
python中os操作文件及文件路径实例汇总
2015/01/15 Python
Python序列操作之进阶篇
2016/12/08 Python
用Python设计一个经典小游戏
2017/05/15 Python
Python安装官方whl包和tar.gz包的方法(推荐)
2017/06/04 Python
python实现协同过滤推荐算法完整代码示例
2017/12/15 Python
对Django 中request.get和request.post的区别详解
2019/08/12 Python
浅谈pytorch卷积核大小的设置对全连接神经元的影响
2020/01/10 Python
解决Keyerror ''acc'' KeyError: ''val_acc''问题
2020/06/18 Python
如何用Anaconda搭建虚拟环境并创建Django项目
2020/08/02 Python
python利用google翻译方法实例(翻译字幕文件)
2020/09/21 Python
通过代码简单了解django model序列化作用
2020/11/12 Python
css3 flex实现div内容水平垂直居中的几种方法
2020/03/27 HTML / CSS
英国骑行、跑步、游泳、铁人三项运动装备专卖店:Wiggle
2016/08/23 全球购物
Europcar德国:全球汽车租赁领域的领导者
2018/08/15 全球购物
超级搞笑检讨书
2014/01/15 职场文书
乡镇干部个人整改措施思想汇报
2014/10/10 职场文书
2015领导干部廉洁自律工作总结
2015/07/23 职场文书
新课程改革心得体会
2016/01/22 职场文书
写给医护人员的一封感谢信
2019/09/16 职场文书
vue实现可拖拽的dialog弹框
2021/05/13 Vue.js