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 相关文章推荐
使用onbeforeunload属性后的副作用
Mar 08 Javascript
DLL+ ActiveX控件+WEB页面调用例子
Aug 07 Javascript
jQuery事件绑定.on()简要概述及应用
Feb 07 Javascript
基于jquery编写的横向自适应幻灯片切换特效的实例代码
Aug 06 Javascript
使用jQuery插件创建常规模态窗口登陆效果
Aug 23 Javascript
Javascript中实现trim()函数的两种方法
Feb 04 Javascript
jQuery基于muipicker实现仿ios时间选择
Feb 22 Javascript
jQuery源码分析之init的详细介绍
Feb 13 Javascript
JavaScript数组和对象的复制
Mar 21 Javascript
JavaScript中的&quot;=、==、===&quot;区别讲解
Jan 22 Javascript
vue分页器组件编写方法详解
Jun 28 Javascript
VUE子组件向父组件传值详解(含传多值及添加额外参数场景)
Sep 01 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 计划任务 检测用户连接状态
2012/03/29 PHP
编译php 5.2.14+fpm+memcached(具体操作详解)
2013/06/18 PHP
体育彩票排列三组选三算法分享
2014/03/07 PHP
php微信开发之图片回复功能
2018/06/14 PHP
Thinkphp整合阿里云OSS图片上传实例代码
2019/04/28 PHP
thinkphp5 框架结合plupload实现图片批量上传功能示例
2020/04/04 PHP
js中eval()函数和trim()去掉字符串左右空格应用
2013/02/02 Javascript
jQuery模拟物体自由落体运动(附演示与demo源码下载)
2016/01/21 Javascript
工作中比较实用的JavaScript验证和数据处理的干货(经典)
2016/08/03 Javascript
利用jsonp跨域调用百度js实现搜索框智能提示
2016/08/24 Javascript
JS中this上下文对象使用方式
2016/10/09 Javascript
js实现点击展开隐藏效果(实例代码)
2018/09/28 Javascript
详解如何快速配置webpack多入口脚手架
2018/12/28 Javascript
Preload基础使用方法详解
2020/02/03 Javascript
Vue使用JSEncrypt实现rsa加密及挂载方法
2020/02/07 Javascript
javascript实现点击按钮切换轮播图功能
2020/09/23 Javascript
Js利用正则表达式去除字符串的中括号
2020/11/23 Javascript
python脚本实现xls(xlsx)转成csv
2016/04/10 Python
python学习笔记--将python源文件打包成exe文件(pyinstaller)
2018/05/26 Python
在pytorch中对非叶节点的变量计算梯度实例
2020/01/10 Python
tensorflow mnist 数据加载实现并画图效果
2020/02/05 Python
深入了解python列表(LIST)
2020/06/08 Python
css3让div随鼠标移动而抖动起来
2014/02/10 HTML / CSS
自我鉴定书
2014/03/24 职场文书
爱耳日活动总结
2014/04/30 职场文书
汽车维修专业自荐书
2014/05/26 职场文书
发展党员工作情况汇报
2014/10/28 职场文书
董事长秘书岗位职责
2015/02/13 职场文书
质量负责人岗位职责
2015/02/15 职场文书
大学生就业推荐表自我评价
2015/03/02 职场文书
讲座通知范文
2015/04/23 职场文书
婚礼伴郎致辞
2015/07/28 职场文书
家访教师心得体会
2016/01/23 职场文书
会计工作自我鉴定范文
2019/06/21 职场文书
MySQL里面的子查询的基本使用
2021/08/02 MySQL
redis复制有可能碰到的问题汇总
2022/04/03 Redis