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 相关文章推荐
激活 ActiveX 控件
Oct 09 Javascript
window.open()弹出居中的窗口
Feb 01 Javascript
JavaScript代码性能优化总结(推荐)
May 16 Javascript
Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果
May 27 Javascript
总结Node.js中的一些错误类型
Aug 15 Javascript
解决canvas画布使用fillRect()时高度出现双倍效果的问题
Aug 03 Javascript
vue实现商品加减计算总价的实例代码
Aug 12 Javascript
微信小程序实现弹出菜单动画
Jun 21 Javascript
vue中的mescroll搜索运用及各种填坑处理
Oct 30 Javascript
JavaScript实现PC端横向轮播图
Feb 07 Javascript
浅谈javascript事件环微任务和宏任务队列原理
Sep 12 Javascript
分享15个Webpack实用的插件!!!
Mar 31 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 处理TXT文件(打开/关闭/检查/读取)
2013/05/13 PHP
PHP与Ajax相结合实现登录验证小Demo
2016/03/16 PHP
利用php + Laravel如何实现部署自动化详解
2017/10/11 PHP
PHP让数组中有相同值的组成新的数组实例
2017/12/31 PHP
php在windows环境下获得cpu内存实时使用率(推荐)
2018/02/08 PHP
我也种棵OO树JXTree[js+css+xml]
2007/04/02 Javascript
不安全的常用的js写法
2009/09/15 Javascript
基于Jquery的淡入淡出的特效基础练习
2010/12/13 Javascript
页面调用单个swf文件,嵌套出多个方法。
2011/11/21 Javascript
JS的replace方法详细介绍
2012/11/09 Javascript
JS添加删除一组文本框并对输入信息加以验证判断其正确性
2013/04/11 Javascript
jquery实现在页面加载完毕后获取图片高度或宽度
2014/06/16 Javascript
node.js中的path.dirname方法使用说明
2014/12/09 Javascript
js实现类似于add(1)(2)(3)调用方式的方法
2015/03/04 Javascript
JS+CSS实现电子商务网站导航模板效果代码
2015/09/10 Javascript
jQuery监听文件上传实现进度条效果的方法
2016/10/16 Javascript
JavaScript实现的微信二维码图片生成器的示例
2016/10/26 Javascript
Bootstrap 下拉多选框插件Bootstrap Multiselect
2017/01/22 Javascript
js实现拖拽功能
2017/03/01 Javascript
Node.js npm命令运行node.js脚本的方法
2018/10/10 Javascript
Puppeteer 爬取动态生成的网页实战
2018/11/14 Javascript
30分钟精通React今年最劲爆的新特性——React Hooks
2019/03/11 Javascript
一篇文章弄懂javascript中的执行栈与执行上下文
2019/08/09 Javascript
ckeditor一键排版功能实现方法分析
2020/02/06 Javascript
Python中super关键字用法实例分析
2015/05/28 Python
在pycharm 中添加运行参数的操作方法
2019/01/19 Python
django框架面向对象ORM模型继承用法实例分析
2019/07/29 Python
python 利用jinja2模板生成html代码实例
2019/10/10 Python
python判断链表是否有环的实例代码
2020/01/31 Python
Python函数默认参数常见问题及解决方案
2020/03/26 Python
python读取yaml文件后修改写入本地实例
2020/04/27 Python
python爬虫用mongodb的理由
2020/07/28 Python
15个应该掌握的Jupyter Notebook使用技巧(小结)
2020/09/23 Python
HTML5中div、article、section的区别及使用介绍
2013/08/14 HTML / CSS
opencv实现图像几何变换
2021/03/24 Python
Nginx+Windows搭建域名访问环境的操作方法
2022/03/17 Servers