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 相关文章推荐
Jquery 弹出层插件实现代码
Oct 24 Javascript
查找Oracle高消耗语句的方法
Mar 22 Javascript
原生JavaScript实现合并多个数组示例
Sep 21 Javascript
js获取客户端操作系统类型的方法【测试可用】
May 27 Javascript
Web性能优化系列 10个提升JavaScript性能的技巧
Sep 27 Javascript
Bootstrap table使用方法总结
May 10 Javascript
vue 组件高级用法实例详解
Apr 11 Javascript
angular实现input输入监听的示例
Aug 31 Javascript
JS温故而知新之变量提升和时间死区
Jan 27 Javascript
微信小程序实现的动态设置导航栏标题功能示例
Jan 31 Javascript
微信小程序封装多张图片上传api代码实例
Dec 30 Javascript
你知道JavaScript Symbol类型怎么用吗
Jan 08 Javascript
利用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
印尼林东PWN黄金曼特宁咖啡豆:怎么冲世界上最醇厚的咖啡冲煮教程
2021/03/03 冲泡冲煮
PHP获取类中常量,属性,及方法列表的方法
2009/04/09 PHP
php用户登录之cookie信息安全分析
2016/05/13 PHP
PHP实现的贪婪算法实例
2017/10/17 PHP
css动画效果之animation的常用样式
2021/03/09 HTML / CSS
IE中jscript/javascript的条件编译
2006/09/07 Javascript
jquery实现点击TreeView文本父节点展开/折叠子节点
2013/01/10 Javascript
js跨浏览器实现将字符串转化为xml对象的方法
2013/09/25 Javascript
Javascript异步编程模型Promise模式详细介绍
2014/05/08 Javascript
javascript结合canvas实现图片旋转效果
2015/05/03 Javascript
jQuery获取访问者IP地址的方法(基于新浪API与QQ查询接口)
2016/05/25 Javascript
jQuery实现联动下拉列表查询框
2017/01/04 Javascript
js oncontextmenu事件使用详解
2017/03/25 Javascript
防止页面url缓存中ajax中post请求的处理方法
2017/10/10 Javascript
vue-awesome-swiper滑块插件使用方法详解
2017/11/27 Javascript
基于IView中on-change属性的使用详解
2018/03/15 Javascript
vue组件与复用详解
2018/04/08 Javascript
微信小程序中进行地图导航功能的实现方法
2018/06/29 Javascript
JS+canvas画布实现炫酷的旋转星空效果示例
2019/02/13 Javascript
uni-app 组件里面获取元素宽高的实现
2019/12/27 Javascript
Python设计模式之享元模式原理与用法实例分析
2019/01/11 Python
python读取并定位excel数据坐标系详解
2019/06/26 Python
python判断无向图环是否存在的示例
2019/11/22 Python
利用html5 canvas动态画饼状图的示例代码
2018/04/02 HTML / CSS
漫威玩具服装及周边商品官方购物网站:Marvel Shop
2019/05/11 全球购物
街头时尚在线:JESSICABUURMAN
2019/06/16 全球购物
澳大利亚最受欢迎的美发用品目的地:AMR
2019/08/28 全球购物
护理学应聘自荐书范文
2014/02/05 职场文书
求职简历自我评价范例
2014/03/12 职场文书
职业生涯规划书结束语
2014/04/15 职场文书
工伤事故赔偿协议书范文
2014/09/24 职场文书
2014学习十八届四中全会精神思想汇报范文
2014/10/23 职场文书
先进个人事迹材料范文
2014/12/30 职场文书
2019朋友新婚祝福语精选
2019/10/10 职场文书
导游词之张家界
2019/10/31 职场文书