Javascript获取窗口(容器)的大小及位置参数列举及简要说明


Posted in Javascript onDecember 09, 2012

Javascript获取窗口(容器)的大小及位置一系列的东西比较多,容易混淆,在这里列举及简要说明下:

属性方法说明
clientX 相对文档的水平坐标;
clientY 相对文档的垂直坐标;
offsetX 相对容器的水平坐标;
offsetY 相对容器的垂直坐标;
scrollWidth 获取对象的滚动宽度;
scrollHeight 获取对象的滚动高度;
scrollLeft 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 ;
scrollTop 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 ;
offsetWidth 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度;
offsetHeight 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度;
offsetLeft 获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 ;
offsetTop 获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置.

Javascript获取屏幕、窗口大小方法
屏幕分辨率的高:window.screen.height ;
屏幕分辨率的宽:window.screen.width ;
屏幕可用工作区高度(不包含任务栏):window.screen.availHeight ;
屏幕可用工作区宽度(不包含任务栏):window.screen.availWidth;
网页可见区域宽(不包含滚动条和边框):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 .

注:有时会出现取不到值的情况,是因为html文件头部加了文档类型
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> ,
此时把document.body.scrollTop和document.body.scrollLeft改为:document.documentElement.scrollTop 和document.documentElement.scrollLeft即可,document.body.clientWidth和document.body.clientHeight也要改为:document.documentElement.clientWidth和document.documentElement.clientHeight

当然还有疏漏或没说明清楚的地方,大家可以补充、讨论或者百度百度,一起进步!ye~

Javascript 相关文章推荐
在第一个input框内输入内容.textarea自动得到第一个文件框的值的javascript代码
Apr 20 Javascript
AppBaseJs 类库 网上常用的javascript函数及其他js类库写的
Mar 04 Javascript
Javascript创建自定义对象 创建Object实例添加属性和方法
Jun 04 Javascript
JS的get和set使用示例
Feb 20 Javascript
一个Action如何调用两个不同的方法
May 22 Javascript
JavaScript DOM 学习总结(五)
Nov 24 Javascript
JS动态创建元素的两种方法
Apr 20 Javascript
搞定immutable.js详细说明
May 02 Javascript
JS 组件系列之Bootstrap Table的冻结列功能彻底解决高度问题
Jun 30 Javascript
详解vue-cli 脚手架项目-package.json
Jul 04 Javascript
vue-cli3搭建项目的详细步骤
Dec 05 Javascript
通过cordova将vue项目打包为webapp的方法
Feb 02 Javascript
定义JavaScript二维数组采用定义数组的数组来实现
Dec 09 #Javascript
javascript操作JSON的要领总结
Dec 09 #Javascript
js写一个弹出层并锁屏效果实现代码
Dec 07 #Javascript
JavaScript之Getters和Setters 平台支持等详细介绍
Dec 07 #Javascript
缓动函数requestAnimationFrame 更好的实现浏览器经动画
Dec 07 #Javascript
javascrpt绑定事件之匿名函数无法解除绑定问题
Dec 06 #Javascript
php图像生成函数之间的区别分析
Dec 06 #Javascript
You might like
全国FM电台频率大全 - 29 青海省
2020/03/11 无线电
基于数据库的在线人数,日访问量等统计
2006/10/09 PHP
解析PHP中一些可能会被忽略的问题
2013/06/21 PHP
8个必备的PHP功能开发
2015/10/02 PHP
php 5.4 全新的代码复用Trait详解
2017/01/05 PHP
2017年最新PHP经典面试题目汇总(上篇)
2017/03/17 PHP
PHP中用Trait封装单例模式的实现
2019/12/18 PHP
精通Javascript系列之Javascript基础篇
2011/06/07 Javascript
JS复制内容到剪切板的实例代码(兼容IE与火狐)
2013/11/19 Javascript
jQuery实现数秒后自动提交form的方法
2015/03/05 Javascript
JavaScript数据库TaffyDB用法实例分析
2015/07/27 Javascript
通用无限极下拉菜单的实现代码
2016/05/31 Javascript
vue实现页面加载动画效果
2017/09/19 Javascript
微信小程序使用Socket的实例
2017/09/19 Javascript
jQuery实现使用sort方法对json数据排序的方法
2018/04/17 jQuery
vue中子组件向父组件传递数据的实例代码(实现加减功能)
2018/04/20 Javascript
vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法
2018/09/05 Javascript
jquery插件开发模式实例详解
2019/07/20 jQuery
jquery实现简单每周轮换的日历
2020/09/10 jQuery
vue实现标签云效果的示例
2020/11/09 Javascript
[02:09]抵达西雅图!中国军团加油!
2014/07/07 DOTA
Python通过解析网页实现看报程序的方法
2014/08/04 Python
Python使用pickle模块存储数据报错解决示例代码
2018/01/26 Python
单链表反转python实现代码示例
2018/02/08 Python
python使用openpyxl库修改excel表格数据方法
2018/05/03 Python
python 3.6.5 安装配置方法图文教程
2018/09/18 Python
python SVM 线性分类模型的实现
2019/07/19 Python
python中np是做什么的
2020/07/21 Python
澳大利亚便宜隐形眼镜购买网站:QUICKLENS Australia
2018/10/06 全球购物
大学生预备党员自我评价分享
2013/11/16 职场文书
房产转让协议书
2014/04/11 职场文书
报到证办理个人委托书
2014/10/06 职场文书
民政局标准版离婚协议书
2014/12/01 职场文书
2014年底个人工作总结
2015/03/10 职场文书
2019年度行政文员工作计划范本!
2019/07/04 职场文书
php将xml转化对象的实例详解
2021/11/17 PHP