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 相关文章推荐
滚动条变色 隐藏滚动条与双击网页自动滚屏显示代码
Dec 28 Javascript
js遍历td tr等html元素
Dec 13 Javascript
js打开新窗口方法整理
Feb 17 Javascript
浅析js预加载/延迟加载
Sep 25 Javascript
jQuery中prepend()方法用法实例
Dec 25 Javascript
微信支付 JS API支付接口详解
Jul 11 Javascript
JavaScript中的冒泡排序法
Aug 03 Javascript
浅谈js的异步执行
Oct 18 Javascript
AngularJS中使用ngModal模态框实例
May 27 Javascript
微信小程序实现跟随菜单效果和循环嵌套加载数据
Nov 21 Javascript
layer ui 导入文件之前传入数据的实例
Sep 23 Javascript
让你30分钟快速掌握vue3教程
Oct 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
利用PHP动态生成VRML网页
2006/10/09 PHP
深入探讨:PHP使用数据库永久连接方式操作MySQL的是与非
2013/06/05 PHP
php判断字符串在另一个字符串位置的方法
2014/02/27 PHP
PHP管理依赖(dependency)关系工具 Composer的自动加载(autoload)
2014/08/18 PHP
1亿条数据如何分表100张到Mysql数据库中(PHP)
2015/07/29 PHP
php简单截取字符串代码示例
2016/10/19 PHP
PHP实现对文件锁进行加锁、解锁操作的方法
2017/07/04 PHP
Laravel等框架模型关联的可用性浅析
2019/12/15 PHP
windows系统php环境安装swoole具体步骤
2021/03/04 PHP
js控制div及网页相关属性的代码
2009/12/19 Javascript
JavaScript中的null和undefined解析
2012/04/14 Javascript
js实现身份证号码验证的简单实例
2014/02/19 Javascript
七个不允许错过的jQuery小技巧
2015/12/21 Javascript
jQuery实现的购物车物品数量加减功能代码
2016/11/16 Javascript
javascript入门之数组[新手必看]
2016/11/21 Javascript
JavaScript中return用法示例
2016/11/29 Javascript
Iphone手机、安卓手机浏览器控制默认缩放大小的方法总结(附代码)
2017/08/18 Javascript
Vue实现web分页组件详解
2017/11/28 Javascript
Node中对非阻塞I/O、事件循环的知识点总结
2020/01/05 Javascript
vue利用全局导航守卫作登录后跳转到未登录前指定页面的实例代码
2020/05/19 Javascript
基于javascript canvas实现五子棋游戏
2020/07/08 Javascript
js实现滑动进度条效果
2020/08/21 Javascript
Python字符串特性及常用字符串方法的简单笔记
2016/01/04 Python
Pycharm学习教程(7)虚拟机VM的配置教程
2017/05/04 Python
解决新版Pycharm中Matplotlib图像不在弹出独立的显示窗口问题
2019/01/15 Python
Python函数中的可变长参数详解
2019/09/12 Python
Python selenium环境搭建实现过程解析
2020/09/08 Python
西班牙Polo衫品牌:Polo Club
2020/08/09 全球购物
波兰运动鞋网上商店:Distance.pl
2020/07/30 全球购物
期终自我鉴定
2014/02/17 职场文书
原料仓管员岗位职责
2014/04/12 职场文书
岗位竞聘演讲稿范文
2014/04/24 职场文书
学生期末评语大全
2014/04/30 职场文书
一体化教学实施方案
2014/05/10 职场文书
党员倡议书
2015/01/19 职场文书
企业年会祝酒词
2015/08/11 职场文书