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 相关文章推荐
Javascript中的数学函数集合
May 08 Javascript
自己编写的类似JS的trim方法
Oct 09 Javascript
jQuery实现公告文字左右滚动的实例代码
Oct 29 Javascript
关于js原型的面试题讲解
Sep 25 Javascript
React Native使用百度Echarts显示图表的示例代码
Nov 07 Javascript
微信小程序实现animation动画
Jan 26 Javascript
怎样在vue项目下添加ESLint的方法
May 16 Javascript
js获取对象,数组所有属性键值(key)和对应值(value)的方法示例
Jun 19 Javascript
ant-design-vue 实现表格内部字段验证功能
Dec 16 Javascript
详谈Vue.js框架下main.js,App.vue,page/index.vue之间的区别
Aug 12 Javascript
Vue开发中常见的套路和技巧总结
Nov 24 Vue.js
Vue3 Composition API的使用简介
Mar 29 Vue.js
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
Zend studio for eclipse中使php可以调用mysql相关函数的设置方法
2008/10/13 PHP
在PHP中检查PHP文件是否有语法错误的方法
2009/12/23 PHP
php 字符串函数收集
2010/03/29 PHP
PHP convert_cyr_string()函数讲解
2019/02/13 PHP
jQuery.event兼容各浏览器的event详细解析
2013/12/18 Javascript
用户代理字符串userAgent可实现的四个识别
2015/09/20 Javascript
JavaScript+CSS无限极分类效果完整实现方法
2015/12/22 Javascript
jQuery validate插件实现ajax验证重复的2种方法
2016/01/22 Javascript
微信小程序 教程之注册程序
2016/10/17 Javascript
bootstrapfileinput实现文件自动上传
2016/11/08 Javascript
详解NodeJS框架express的路径映射(路由)功能及控制
2017/03/24 NodeJs
详谈AngularJs 控制器、数据绑定、作用域
2017/07/09 Javascript
JS实现导出Excel的五种方法详解【附源码下载】
2018/03/15 Javascript
从Node.js事件触发器到Vue自定义事件的深入讲解
2020/06/26 Javascript
深入理解javascript中的this
2021/02/08 Javascript
[59:42]Secret vs Alliacne 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python2.5/2.6实用教程 入门基础篇
2009/11/29 Python
详解Python函数可变参数定义及其参数传递方式
2017/08/02 Python
怎么使用pipenv管理你的python项目
2018/03/12 Python
Python异常处理操作实例详解
2018/08/28 Python
Python线程之定位与销毁的实现
2019/02/17 Python
Django多进程滚动日志问题解决方案
2019/12/17 Python
tensorflow 只恢复部分模型参数的实例
2020/01/06 Python
如何使用python代码操作git代码
2020/02/29 Python
Python reversed函数及使用方法解析
2020/03/17 Python
解决运行django程序出错问题 'str'object has no attribute'_meta'
2020/07/15 Python
使用css3匹配手机屏幕横竖状态
2014/01/27 HTML / CSS
EVE LOM英国官网:全世界最好的洁面膏
2017/10/30 全球购物
Gucci法国官方网站:意大利奢侈品牌
2018/07/25 全球购物
党员干部一句话承诺
2014/05/30 职场文书
汽车销售经理岗位职责
2014/06/09 职场文书
平安工地汇报材料
2014/08/19 职场文书
餐饮服务员岗位职责
2015/02/09 职场文书
应届毕业生求职简历自我评价
2015/03/02 职场文书
Java中的随机数Random
2022/03/17 Java/Android
Mysql中mvcc各场景理解应用
2022/08/05 MySQL