JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)


Posted in Javascript onDecember 14, 2013

js与jquery获得页面大小、滚动条位置、元素位置

//页面位置及窗口大小
function GetPageSize() {
var scrW, scrH; 
if(window.innerHeight && window.scrollMaxY) 
{    // Mozilla    
scrW = window.innerWidth + window.scrollMaxX;    
scrH = window.innerHeight + window.scrollMaxY; 
} 
else if(document.body.scrollHeight > document.body.offsetHeight)
{    // all but IE Mac    
scrW = document.body.scrollWidth;    
scrH = document.body.scrollHeight; 
} else if(document.body) 
{ // IE Mac    
scrW = document.body.offsetWidth;    
scrH = document.body.offsetHeight;
} 
var winW, winH; 
if(window.innerHeight) 
{ // all except IE    
winW = window.innerWidth; 
winH = window.innerHeight; 
} else if (document.documentElement && document.documentElement.clientHeight)
{    // IE 6 Strict Mode    
winW = document.documentElement.clientWidth;     
winH = document.documentElement.clientHeight; 
} else if (document.body) { // other    
winW = document.body.clientWidth;    
winH = document.body.clientHeight; 
}    // for small pages with total size less then the viewport 
var pageW = (scrW<winW) ? winW : scrW; 
var pageH = (scrH<winH) ? winH : scrH;    
return {PageW:pageW, PageH:pageH, WinW:winW, WinH:winH};
};
//滚动条位置
function GetPageScroll() 
{ 
var x, y; if(window.pageYOffset) 
{    // all except IE    
y = window.pageYOffset;    
x = window.pageXOffset; 
} else if(document.documentElement && document.documentElement.scrollTop) 
{    // IE 6 Strict    
y = document.documentElement.scrollTop;    
x = document.documentElement.scrollLeft; 
} else if(document.body) {    // all other IE    
y = document.body.scrollTop;    
x = document.body.scrollLeft;   
} 
return {X:x, Y:y};
}

jquery

获取浏览器显示区域的高度 : $(window).height();
获取浏览器显示区域的宽度 :$(window).width();
获取页面的文档高度 :$(document).height();
获取页面的文档宽度 :$(document).width();

获取滚动条到顶部的垂直高度 :$(document).scrollTop();
获取滚动条到左边的垂直宽度 :$(document).scrollLeft();

计算元素位置和偏移量
offset方法是一个很有用的方法,它返回包装集中第一个元素的偏移信息。默认情况下是相对body的偏移信息。结果包含 top和left两个属性。
offset(options, results)
options.relativeTo

指定相对计 算偏移位置的祖先元素。这个元素应该是relative或absolute定位。省略则相对body。
options.scroll

是否把 滚动条计算在内,默认TRUE
options.padding

是否把padding计算在内,默认false
options.margin

是否把margin计算在内,默认true
options.border

是否把边框计算在内,默认true

Javascript 相关文章推荐
Javascript学习笔记1 数据类型
Jan 11 Javascript
通过jQuery打造支持汉字,拼音,英文快速定位查询的超级select插件
Jun 18 Javascript
ANT 压缩(去掉空格/注释)JS文件可提高js运行速度
Apr 15 Javascript
JS实现的4种数字千位符格式化方法分享
Mar 02 Javascript
省市区三级联动下拉框菜单javascript版
Aug 11 Javascript
学习JavaScript设计模式之享元模式
Jan 18 Javascript
jQuery实现文章图片弹出放大效果
Apr 06 jQuery
最全的JavaScript开发工具列表 总有一款适合你
Jun 29 Javascript
[js高手之路]寄生组合式继承的优势详解
Aug 28 Javascript
微信小程序将字符串生成二维码图片的操作方法
Jul 17 Javascript
Javascript实现动态时钟效果
Nov 17 Javascript
Vue.js中v-for指令的用法介绍
Mar 13 Vue.js
利用javascript实现禁用网页上所有文本框,下拉菜单,多行文本域
Dec 14 #Javascript
js获取url中指定参数值的示例代码
Dec 14 #Javascript
Js实现双击鼠标自动滚动屏幕的示例代码
Dec 14 #Javascript
鼠标移到div,浮层显示明细,弹出层与div的上边距左边距重合(示例代码)
Dec 14 #Javascript
js键盘上下左右键怎么触发function(实例讲解)
Dec 14 #Javascript
js 上下左右键控制焦点(示例代码)
Dec 14 #Javascript
利用JS来控制键盘的上下左右键(示例代码)
Dec 14 #Javascript
You might like
PHP+javascript模拟Matrix画面
2006/10/09 PHP
PHP执行zip与rar解压缩方法实现代码
2010/12/05 PHP
PHP性能优化准备篇图解PEAR安装
2011/12/05 PHP
php curl的深入解析
2013/06/02 PHP
PHP内核探索之变量
2015/12/22 PHP
php中青蛙跳台阶的问题解决方法
2018/10/14 PHP
PHP 对象继承原理与简单用法示例
2020/04/21 PHP
js中键盘事件实例简析
2015/01/10 Javascript
JS+CSS实现带小三角指引的滑动门效果
2015/09/22 Javascript
JavaScript编程中布尔对象的基本使用
2015/10/25 Javascript
详解vue.js 开发环境搭建最简单攻略
2017/06/12 Javascript
详解在vue-cli项目中安装node-sass
2017/06/21 Javascript
详解基于vue-router的动态权限控制实现方案
2017/09/28 Javascript
在JS循环中使用async/await的方法
2018/10/12 Javascript
vue-router判断页面未登录自动跳转到登录页的方法示例
2018/11/04 Javascript
详解mpvue实现对苹果X安全区域的适配
2019/07/31 Javascript
微信小程序常用的3种提示弹窗实现详解
2019/09/19 Javascript
vue 动态组件(component :is) 和 dom元素限制(is)用法说明
2020/09/04 Javascript
详解vue父子组件状态同步的最佳方式
2020/09/10 Javascript
js实现简易点击切换显示或隐藏
2020/11/29 Javascript
[01:14]2014DOTA2展望TI 剑指西雅图newbee战队专访
2014/06/30 DOTA
Python使用xlrd读取Excel格式文件的方法
2015/03/10 Python
Python openpyxl 遍历所有sheet 查找特定字符串的方法
2018/12/10 Python
Django中ORM外键和表的关系详解
2019/05/20 Python
python装饰器的特性原理详解
2019/12/25 Python
python enumerate内置函数用法总结
2020/01/07 Python
python 爬虫 实现增量去重和定时爬取实例
2020/02/28 Python
什么是python的列表推导式
2020/05/26 Python
戴森比利时官方网站:Dyson BE
2020/10/03 全球购物
Zatchels官网:英国剑桥包品牌
2021/01/12 全球购物
如何减少垃圾回收让内存更加有效使用
2013/10/18 面试题
高中生毕业自我鉴定范文
2013/12/22 职场文书
《回乡偶书》教学反思
2014/04/12 职场文书
保护动物倡议书
2014/04/15 职场文书
大队委员竞选演讲稿
2015/11/20 职场文书
公司团队口号霸气押韵
2015/12/24 职场文书