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 相关文章推荐
40个新鲜出炉的jQuery 插件和免费教程[上]
Jul 24 Javascript
用RadioButten或CheckBox实现div的显示与隐藏
Sep 21 Javascript
jquery 通过name快速取值示例
Jan 24 Javascript
JavaScript常用函数工具集:lao-utils
Mar 01 Javascript
浅析Javascript ES6中的原生Promise
Aug 25 Javascript
EasyUi 打开对话框后控件赋值及赋值后不显示的问题解决办法
Jan 19 Javascript
详解HTML5 使用video标签实现选择摄像头功能
Oct 25 Javascript
javascript中的隐式调用
Feb 10 Javascript
详解vue中localStorage的使用方法
Nov 22 Javascript
JavaScript ES6中的简写语法总结与使用技巧
Dec 30 Javascript
详解vue使用$http服务端收不到参数
Apr 19 Javascript
vue路由传参三种基本方式详解
Dec 09 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
与数据库连接
2006/10/09 PHP
php中文字母数字验证码实现代码
2008/04/25 PHP
PHP错误提示的关闭方法详解
2013/06/23 PHP
php设计模式之单例模式代码
2016/06/11 PHP
DEDE实现转跳属性文档在模板上调用出转跳地址
2016/11/04 PHP
爆炸式的JS圆形浮动菜单特效代码
2010/03/03 Javascript
ImageZoom 图片放大镜效果(多功能扩展篇)
2010/04/14 Javascript
js运动框架_包括图片的淡入淡出效果
2013/05/11 Javascript
使用jsonp完美解决跨域问题
2014/11/27 Javascript
JavaScript中使用Object.create()创建对象介绍
2014/12/30 Javascript
jquery图片滚动放大代码分享(2)
2015/08/28 Javascript
javascript实现添加附件功能的方法
2015/11/18 Javascript
Jquery easyui开启行编辑模式增删改操作
2016/01/14 Javascript
深入理解JS中的Function.prototype.bind()方法
2016/10/11 Javascript
html中鼠标滚轮事件onmousewheel的处理方法
2016/11/11 Javascript
nodejs微信扫码支付功能实现
2018/02/17 NodeJs
详解webpack-dev-server使用方法
2018/09/14 Javascript
javascript实现blob加密视频源地址的方法
2019/08/08 Javascript
JavaScript 作用域实例分析
2019/10/02 Javascript
vue中进行微博分享的实例讲解
2019/10/14 Javascript
使用Mock.js生成前端测试数据
2020/12/13 Javascript
[55:56]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.22
2019/09/05 DOTA
Python中使用logging模块代替print(logging简明指南)
2014/07/09 Python
快速入手Python字符编码
2016/08/03 Python
python-docx修改已存在的Word文档的表格的字体格式方法
2018/05/08 Python
python数据处理之如何选取csv文件中某几行的数据
2019/09/02 Python
解决TensorFlow程序无限制占用GPU的方法
2020/06/30 Python
详解python datetime模块
2020/08/17 Python
html5 Canvas画图教程(9)—canvas中画出矩形和圆形
2013/01/09 HTML / CSS
Christys’ Hats官网:英国帽子制造商
2018/11/28 全球购物
社区维稳工作方案
2014/06/06 职场文书
中国梦演讲稿范文
2014/08/28 职场文书
地球一小时活动总结
2015/02/27 职场文书
dubbo集成zipkin获取Traceid的实现
2021/07/26 Java/Android
Python制作动态字符画的源码
2021/08/04 Python
详解Golang如何实现支持随机删除元素的堆
2022/09/23 Python