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 相关文章推荐
Js nodeType 属性全面解析
Nov 14 Javascript
javascript正则表达式参数/g与/i及/gi的使用指南
Aug 27 Javascript
浅谈JavaScript实现面向对象中的类
Dec 09 Javascript
jQuery使用hide方法隐藏指定元素class样式用法实例
Mar 30 Javascript
Jquery中使用show()与hide()方法动画显示和隐藏图片
Oct 08 Javascript
10道典型的JavaScript面试题
Mar 22 Javascript
详解webpack import()动态加载模块踩坑
Jul 17 Javascript
详解如何在webpack中做预渲染降低首屏空白时间
Aug 22 Javascript
Puppet的一些技巧
Sep 17 Javascript
ES6 如何改变JS内置行为的代理与反射
Feb 11 Javascript
layui 监听select选择 获取当前select的ID名称方法
Sep 24 Javascript
javascript之Object.assign()的痛点分析
Mar 03 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
无JS,完全php面向过程数据分页实现代码
2012/08/27 PHP
php简单操作mysql数据库的类
2015/04/16 PHP
php基于双向循环队列实现历史记录的前进后退等功能
2015/08/08 PHP
深入浅出讲解:php的socket通信原理
2016/12/03 PHP
理解JavaScript中的事件
2006/09/23 Javascript
Firefox中beforeunload事件的实现缺陷浅析
2012/05/03 Javascript
Jquery 动态生成表格示例代码
2013/12/24 Javascript
基于jQuery实现响应式圆形图片轮播特效
2015/11/25 Javascript
JavaScript中的call和apply的用途以及区别
2017/01/11 Javascript
详解vue父子组件间传值(props)
2017/06/29 Javascript
NodeJS服务器实现gzip压缩的示例代码
2018/10/12 NodeJs
通过js随机函数Math.random实现乱序
2020/05/19 Javascript
design vue 表格开启列排序的操作
2020/10/28 Javascript
python中使用sys模板和logging模块获取行号和函数名的方法
2014/04/15 Python
在Python中进行自动化单元测试的教程
2015/04/15 Python
举例详解Python中threading模块的几个常用方法
2015/06/18 Python
Python脚本实时处理log文件的方法
2016/11/21 Python
通过Python 获取Android设备信息的轻量级框架
2017/12/18 Python
修改python plot折线图的坐标轴刻度方法
2018/12/13 Python
python实现简单加密解密机制
2019/03/19 Python
Python计算IV值的示例讲解
2020/02/28 Python
Python操作Jira库常用方法解析
2020/04/10 Python
使用Python防止SQL注入攻击的实现示例
2020/05/21 Python
python绘制雷达图实例讲解
2021/01/03 Python
美国酒店控股公司:Choice Hotels
2018/06/15 全球购物
韩国流行时尚女装网站:Dintchina(中文)
2018/07/19 全球购物
微软加拿大官方网站:Microsoft Canada
2019/04/28 全球购物
学习十八大报告感言
2014/02/28 职场文书
2014年党员整改措施范文
2014/09/21 职场文书
2014年最新离婚协议书范本
2014/10/11 职场文书
精神病医院见习报告
2014/11/03 职场文书
杨善洲电影观后感
2015/06/04 职场文书
2016关于学习党章的心得体会
2016/01/15 职场文书
MySQL 慢查询日志深入理解
2021/04/22 MySQL
MySQL不使用order by实现排名的三种思路总结
2021/06/02 MySQL
Pygame Event事件模块的详细示例
2021/11/17 Python