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重建星际争霸
Dec 22 Javascript
jQuery 常见学习网站与参考书
Nov 09 Javascript
JQGrid的用法解析(列编辑,添加行,删除行)
Nov 08 Javascript
js或jquery实现页面打印可局部打印
Mar 27 Javascript
牛叉的Jquery——Jquery与DOM对象的互相转换及DOM的三种操作
Oct 29 Javascript
基于javascript html5实现多文件上传
Mar 03 Javascript
vue-router路由参数刷新消失的问题解决方法
Jun 17 Javascript
简单实现jQuery上传图片显示预览功能
Jun 29 jQuery
JavaScript满天星导航栏实现方法
Mar 08 Javascript
iview table高度动态设置方法
Mar 14 Javascript
element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)
Jan 15 Javascript
vueScroll实现移动端下拉刷新、上拉加载
Mar 22 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实现获取第一个中文首字母并进行排序的方法
2017/05/09 PHP
PHP hebrev()函数用法讲解
2019/02/21 PHP
解决Laravel自定义类引入和命名空间的问题
2019/10/15 PHP
Laravel 验证码认证学习记录小结
2019/12/20 PHP
完美解决JS中汉字显示乱码问题(已解决)
2006/12/27 Javascript
jQuery 事件队列调整方法
2009/09/18 Javascript
解析offsetHeight,clientHeight,scrollHeight之间的区别
2013/11/20 Javascript
使用JavaScript获取地址栏参数的方法
2014/12/19 Javascript
jQuery结合ajax实现动态加载文本内容
2015/05/19 Javascript
JQuery datepicker 用法详解
2015/12/25 Javascript
利用js编写响应式侧边栏
2016/09/17 Javascript
通过bootstrap全面学习less
2016/11/09 Javascript
纯JS实现轮播图
2017/02/22 Javascript
js字符限制(字符截取) 一个中文汉字算两个字符
2017/09/12 Javascript
JavaScript实现快速排序的方法分析
2018/01/10 Javascript
react-native 圆弧拖动进度条实现的示例代码
2018/04/12 Javascript
微信小程序webview组件交互,内联h5页面并网页实现微信支付实现解析
2019/08/16 Javascript
Python实现输入二叉树的先序和中序遍历,再输出后序遍历操作示例
2018/07/27 Python
Python多线程:主线程等待所有子线程结束代码
2020/04/25 Python
Python代码需要缩进吗
2020/07/01 Python
Python基于Serializer实现字段验证及序列化
2020/11/04 Python
CSS3截取字符串实例代码【推荐】
2018/06/07 HTML / CSS
CSS3 Flexbox中flex-shrink属性的用法示例介绍
2013/12/30 HTML / CSS
Vichy薇姿加拿大官网:法国药妆,全球专业敏感肌护肤领先品牌
2018/07/11 全球购物
预订旅游活动、景点和旅游:GetYourGuide
2019/09/29 全球购物
JAVA中的关键字有什么特点
2014/03/07 面试题
一套英文Java笔试题面试题
2016/04/21 面试题
大学生求职简历的自我评价范文
2013/10/12 职场文书
施工安全协议书
2013/12/11 职场文书
促销活动总结模板
2014/07/01 职场文书
群众路线剖析材料
2014/09/30 职场文书
农村文化建设标语
2014/10/07 职场文书
十八大宣传标语
2014/10/09 职场文书
2015年物流客服工作总结
2015/07/27 职场文书
Python如何利用正则表达式爬取网页信息及图片
2021/04/17 Python
python执行js代码的方法
2021/05/13 Python