Javascript获取窗口的大小及位置
来源:互联网 发布:淘宝店基本常识 编辑:程序博客网 时间:2024/05/01 23:43
捣腾了二个多小时,终于找到获取窗口的方法了。现在做一个笔记,这种错误我可不想在犯一次!呵呵.......
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
我们定义一个获取游览器窗口大小的方法:
function getBrowserWindowSize(){var de = document.documentElement;//返回一个通过对象字面量创建的对象return { widht : (window.innerWidth || (de && de.clientWidth) || document.body.clientWidth), height : (window.innerHeight || (de && de.clientHeight) || document.body.clientHeight)};}
- Javascript获取窗口的大小及位置
- 跨浏览器用javascript获取窗口的位置和大小
- 跨浏览器用javascript获取窗口的位置和大小
- Qt 获取窗口的位置和大小
- MFC窗口位置和大小的获取
- javascript 获取窗口大小
- javascript 获取窗口大小
- JavaScript获取窗口大小
- JavaScript 获取浏览器窗口的大小
- JavaScript 获取浏览器窗口的大小
- c# 获取当前活动窗口句柄,获取窗口大小及位置
- c# 获取当前活动窗口句柄,获取窗口大小及位置
- c# 获取当前活动窗口句柄,获取窗口大小及位置
- 用 Javascript 获取页面大小、窗口大小和滚动条位置
- 用 Javascript 获取頁面大小、窗口大小和滾動條位置
- 更改获取到窗口句柄的游戏界面大小、位置
- IE和FF下javascript获取网页及窗口大小的区别
- IE与FF下javascript获取网页及窗口大小的区别详解
- 乱七八糟
- iframe的用法
- 写给妹妹的编程札记 1 - 穷举: 从循环到递归
- 利用随机化的思想比较两个字符串是否相等
- coding---常用字符串接口
- Javascript获取窗口的大小及位置
- tomcat部署web项目的3中方法
- Android自学笔记之SharedPreference
- 黑马程序员-注解(高新技术)
- 庞果网杨辉三角的变形
- Lightoj1134/poj3844 组合数学
- Android自学笔记之Android常见命令操作及一些普通布局属性
- 批量删除Redis数据库中的Key
- Android自定义AutoCompleteTextView实现自动补全Email