jquery如何获取元素的滚动条高度等实现代码


Posted in Javascript onOctober 19, 2015

主要功能:

获取浏览器显示区域(可视区域)的高度 :  
$(window).height();  
获取浏览器显示区域(可视区域)的宽度 :
$(window).width();  
获取页面的文档高度  
$(document).height();  
获取页面的文档宽度 :
$(document).width(); 
浏览器当前窗口文档body的高度: 
$(document.body).height();
浏览器当前窗口文档body的宽度: 
$(document.body).width();
获取滚动条到顶部的垂直高度 (即网页被卷上去的高度) 
$(document).scrollTop();  
获取滚动条到左边的垂直宽度 :
$(document).scrollLeft(); 
获取或设置元素的宽度:
$(obj).width();
获取或设置元素的高度:
$(obj).height();
某个元素的上边界到body最顶部的距离:obj.offset().top;(在元素的包含元素不含滚动条的情况下)
某个元素的左边界到body最左边的距离:obj.offset().left;(在元素的包含元素不含滚动条的情况下)
返回当前元素的上边界到它的包含元素的上边界的偏移量:obj.offset().top(在元素的包含元素含滚动条的情况下)
返回当前元素的左边界到它的包含元素的左边界的偏移量:obj.offset().left(在元素的包含元素含滚动条的情况下)
//返回当前页面高度

function pageHeight(){
if($.browser.msie){
return document.compatMode == "CSS1Compat"? document.documentElement.clientHeight :
document.body.clientHeight;
}else{
return self.innerHeight;
}
};



//返回当前页面宽度
function pageWidth(){
if($.browser.msie){
return document.compatMode == "CSS1Compat"? document.documentElement.clientWidth :
document.body.clientWidth;
}else{
return self.innerWidth;
}
};

以下是其它网友的补充:

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

获取页面的文档宽度 :$(document).width();
获取滚动条到顶部的垂直高度 :$(document).scrollTop();
获取滚动条到左边的垂直宽度 :$(document).scrollLeft();
计算元素位置和偏移量:$(id).offset();

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
子页面控制父页面:
parent.document.documentElement.scrollTop;
parent.document.documentElement.clientHeight;

Javascript 相关文章推荐
一个简单的js动画效果代码
Jul 20 Javascript
基于JavaScript 声明全局变量的三种方式详解
May 07 Javascript
javascript用函数实现对象的方法
May 14 Javascript
jQuery实现自定义checkbox和radio样式
Jul 13 Javascript
关于JS中match() 和 exec() 返回值和属性的测试
Mar 21 Javascript
基于HTML5上使用iScroll实现下拉刷新,上拉加载更多
May 21 Javascript
脚本div实现拖放功能(两种)
Feb 13 Javascript
js单页hash路由原理与应用实战详解
Aug 14 Javascript
axios 处理 302 状态码的解决方法
Apr 10 Javascript
d3.js实现自定义多y轴折线图的示例代码
May 30 Javascript
使用vue实现多规格选择实例(SKU)
Aug 23 Javascript
vue 内联样式style中的background用法说明
Aug 05 Javascript
js验证身份证号有效性并提示对应信息
Oct 19 #Javascript
详解JavaScript数组的操作大全
Oct 19 #Javascript
全系IE支持Bootstrap的解决方法
Oct 19 #Javascript
JS+CSS实现分类动态选择及移动功能效果代码
Oct 19 #Javascript
谈谈Jquery中的children find 的区别有哪些
Oct 19 #Javascript
JS实现的简洁纵向滑动菜单(滑动门)效果
Oct 19 #Javascript
JS实现的左侧竖向滑动菜单效果代码
Oct 19 #Javascript
You might like
PHP中$_SERVER的详细参数与说明
2008/07/29 PHP
解析php做推送服务端实现ios消息推送
2013/07/01 PHP
thinkPHP5.0框架环境变量配置方法
2017/03/17 PHP
PHP聚合式迭代器接口IteratorAggregate用法分析
2017/12/28 PHP
理解JavaScript的caller,callee,call,apply
2009/04/28 Javascript
javascript中日期转换成时间戳的小例子
2013/03/21 Javascript
js对图片base64编码字符串进行解码并输出图像示例
2014/03/17 Javascript
javascript学习笔记(七)Ajax和Http状态码
2014/10/08 Javascript
解决ueditor jquery javascript 取值问题
2014/12/30 Javascript
JS使用oumousemove和oumouseout动态改变图片显示的方法
2015/03/31 Javascript
编写高性能Javascript代码的N条建议
2015/10/12 Javascript
Bootstrap每天必学之导航条
2015/11/27 Javascript
第四篇Bootstrap网格系统偏移列和嵌套列
2016/06/21 Javascript
jQuery设计思想
2017/03/07 Javascript
webpack学习教程之前端性能优化总结
2017/12/05 Javascript
vuex 的简单使用
2018/03/22 Javascript
JavaScript设计模式之单例模式简单实例教程
2018/07/02 Javascript
vue中element 的upload组件发送请求给后端操作
2020/09/07 Javascript
python2 与python3的print区别小结
2018/01/16 Python
Python http接口自动化测试框架实现方法示例
2018/12/06 Python
pycharm配置git(图文教程)
2019/08/16 Python
精油和天然健康美容产品:Art Naturals
2018/01/27 全球购物
中国旅游网站:途牛旅游网
2019/09/29 全球购物
什么是数组名
2012/05/10 面试题
面试求职的个人自我评价
2013/11/16 职场文书
教师求职信范文分享
2013/12/27 职场文书
简历里的自我评价范文
2014/02/24 职场文书
护士演讲稿优秀范文
2014/04/30 职场文书
网络技术专业求职信
2014/05/02 职场文书
关于美容院的活动方案
2014/08/14 职场文书
俞敏洪一分钟演讲稿
2014/08/26 职场文书
2014年民政局关于保密工作整改措施
2014/09/19 职场文书
作风整顿个人剖析材料
2014/10/06 职场文书
同学聚会邀请函
2015/01/30 职场文书
清洁工个人工作总结
2015/03/05 职场文书
2015年度学校卫生工作总结
2015/05/12 职场文书