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中eval函数的使用方法与示例
Apr 09 Javascript
javascript 建设银行登陆键盘
Jun 10 Javascript
js实现ifram取父窗口URL地址的方法
Feb 09 Javascript
jQuery实现在列表的首行添加数据
May 19 Javascript
JS/jQ实现免费获取手机验证码倒计时效果
Jun 13 Javascript
vue实现表格数据的增删改查
Jul 10 Javascript
Vue.js递归组件构建树形菜单
Dec 24 Javascript
Angular 5.x 学习笔记之Router(路由)应用
Apr 08 Javascript
详解vue表单——小白速看
Apr 08 Javascript
微信小程序 setData 对 data数据影响问题
Apr 18 Javascript
如何通过shell脚本自动生成vue文件详解
Sep 10 Javascript
小程序实现图片移动缩放效果
May 26 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
Apache, PHP在Windows 9x/NT下的安装与配置 (一)
2006/10/09 PHP
mysql中存储过程、函数的一些问题
2007/02/14 PHP
smarty中先strip_tags过滤html标签后truncate截取文章运用
2010/10/25 PHP
深入解析PHP 5.3.x 的strtotime() 时区设定 警告信息修复
2013/08/05 PHP
Smarty保留变量用法分析
2016/05/23 PHP
javascript 鼠标滚轮事件
2009/04/09 Javascript
js以对象为索引的关联数组
2010/07/04 Javascript
根据邮箱的域名跳转到相应的登录页面的代码
2012/02/27 Javascript
javascript实现日历控件(年月日关闭按钮)
2012/12/12 Javascript
JS判断不同分辨率调用不同的CSS样式文件实现思路及测试代码
2013/01/23 Javascript
JSP中使用JavaScript动态插入删除输入框实现代码
2014/06/13 Javascript
JSON字符串和对象之间的转换详解
2015/05/26 Javascript
$.extend 的一个小问题
2015/06/18 Javascript
JS弹出层遮罩,隐藏背景页面滚动条细节优化分析
2016/04/29 Javascript
JQuery.validate在ie8下不支持的快速解决方法
2016/05/18 Javascript
jQuery Ajax Post 回调函数不执行问题的解决方法
2016/08/15 Javascript
JS实现图片高斯模糊切换效果的焦点图实例
2017/01/21 Javascript
jQuery插件HighCharts绘制简单2D折线图效果示例【附demo源码】
2017/03/21 jQuery
vue项目中的webpack-dev-sever配置方法
2017/12/14 Javascript
vue.js或js实现中文A-Z排序的方法
2018/03/08 Javascript
在NPM发布自己造的轮子的方法步骤
2019/03/09 Javascript
Vue 中文本内容超出规定行数后展开收起的处理的实现方法
2019/04/28 Javascript
python处理cookie详解
2014/02/07 Python
Python中设置变量访问权限的方法
2015/04/27 Python
Django 使用easy_thumbnails压缩上传的图片方法
2019/07/26 Python
django 单表操作实例详解
2019/07/30 Python
pytorch cuda上tensor的定义 以及减少cpu的操作详解
2020/06/23 Python
医药工作岗位求职信分享
2013/12/31 职场文书
2014年大学生就业规划书
2014/04/04 职场文书
教师作风建设剖析材料
2014/10/11 职场文书
2014年招商工作总结
2014/11/22 职场文书
八月迷情观后感
2015/06/11 职场文书
涨工资申请书应该怎么写?
2019/07/08 职场文书
如何利用pygame实现打飞机小游戏
2021/05/30 Python
分析JVM源码之Thread.interrupt系统级别线程打断
2021/06/29 Java/Android
Nginx如何配置多个服务域名解析共用80端口详解
2022/09/23 Servers