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学习笔记2 函数
Jan 11 Javascript
仅用[]()+!等符号就足以实现几乎任意Javascript代码
Mar 01 Javascript
用js代码改变单选框选中状态的简单实例
Dec 18 Javascript
JQuery实现鼠标移动到图片上显示边框效果
Jan 09 Javascript
购物车选中得到价格实现示例
Jan 26 Javascript
点击A元素触发B元素的事件在IE8下会识别成A元素
Sep 04 Javascript
采用自执行的匿名函数解决for循环使用闭包的问题
Sep 11 Javascript
jQuery实现漂亮实用的商品图片tips提示框效果(无图片箭头+阴影)
Apr 16 Javascript
基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)
Sep 02 Javascript
fullpage.js全屏滚动插件使用实例
Sep 06 Javascript
Vue.js实现移动端短信验证码功能
Mar 29 Javascript
node上的redis调用优化示例详解
Oct 30 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 和 XML: 使用expat函数(三)
2006/10/09 PHP
PHP新手上路(二)
2006/10/09 PHP
php xml留言板 xml存储数据的简单例子
2009/08/24 PHP
PHP 设置MySQL连接字符集的方法
2011/01/02 PHP
使用配置类定义Codeigniter全局变量
2014/06/12 PHP
万能的php分页类
2017/07/06 PHP
fromCharCode和charCodeAt 方法
2006/12/27 Javascript
javascript prototype 原型链
2009/03/12 Javascript
jquery ajax 检测用户注册时用户名是否存在
2009/11/03 Javascript
jQuery asp.net 用json格式返回自定义对象
2010/04/07 Javascript
jquery mobile事件多次绑定示例代码
2013/09/13 Javascript
利用jquery写的左右轮播图特效
2014/02/12 Javascript
jquery中获得元素尺寸和坐标的方法整理
2014/05/18 Javascript
jQuery实现简单网页遮罩层/弹出层效果兼容IE6、IE7
2014/06/16 Javascript
JS实现超精简的链接列表在固定区域内滚动效果代码
2015/11/04 Javascript
Javascript实现的StopWatch功能示例
2017/06/13 Javascript
vue2.0 使用element-ui里的upload组件实现图片预览效果方法
2018/09/04 Javascript
微信小程序-可移动菜单的实现过程详解
2019/06/24 Javascript
微信小程序使用车牌号输入法的示例代码
2019/08/20 Javascript
基于vue项目设置resolves.alias: '@'路径并适配webstorm
2020/12/02 Vue.js
[03:01]DOTA2英雄基础教程 露娜
2014/01/07 DOTA
[03:14]辉夜杯主赛事 12月25日每日之星
2015/12/26 DOTA
python登录QQ邮箱发信的实现代码
2013/02/10 Python
通过mod_python配置运行在Apache上的Django框架
2015/07/22 Python
对Python的Django框架中的项目进行单元测试的方法
2016/04/11 Python
Python3.6连接Oracle数据库的方法详解
2018/05/18 Python
如何使用Python破解ZIP或RAR压缩文件密码
2020/01/09 Python
python传到前端的数据,双引号被转义的问题
2020/04/03 Python
如何使用Cython对python代码进行加密
2020/07/08 Python
Python2.x与3​​.x版本有哪些区别
2020/07/09 Python
纯CSS3实现绘制各种图形实现代码详细整理
2012/12/26 HTML / CSS
澳大利亚正品化妆品之家:Cosmetic Capital
2017/07/03 全球购物
Vans荷兰官方网站:美国南加州的原创极限运动潮牌
2018/01/23 全球购物
孤独星球出版物:Lonely Planet Publications
2018/03/17 全球购物
商务英语专业毕业生自荐信
2013/11/05 职场文书
创先争优活动承诺书
2014/08/30 职场文书