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 相关文章推荐
基于jquery的9行js轻松实现tab控件示例
Oct 12 Javascript
js截取字符串的两种方法及区别详解
Nov 05 Javascript
node.js中的fs.ftruncate方法使用说明
Dec 15 Javascript
JS刷新父窗口的几种方式小结(推荐)
Nov 09 Javascript
JavaScript 上传文件(psd,压缩包等),图片,视频的实现方法
Jun 19 Javascript
vue中阻止click事件冒泡,防止触发另一个事件的方法
Feb 08 Javascript
Vue从TodoList中学父子组件通信
Feb 05 Javascript
通过JS运行机制的角度说说作用域
Mar 12 Javascript
vue.js多页面开发环境搭建过程
Apr 24 Javascript
vue-cli3配置与跨域处理方法
Aug 17 Javascript
vue实现购物车案例
May 30 Javascript
TS 类型兼容教程示例详解
Sep 23 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缓存集成库phpFastCache用法
2014/12/15 PHP
PHP中file_get_contents函数抓取https地址出错的解决方法(两种方法)
2015/09/22 PHP
隐藏Nginx或Apache以及PHP的版本号的方法
2016/01/03 PHP
Laravel Intervention/image图片处理扩展包的安装、使用与可能遇到的坑详解
2017/11/14 PHP
PHP PDOStatement::getColumnMeta讲解
2019/02/01 PHP
js工具方法弹出蒙版
2013/05/08 Javascript
js 文本滚动效果的实例代码
2013/08/17 Javascript
让angularjs支持浏览器自动填表
2014/11/10 Javascript
使用javascript实现判断当前浏览器
2015/04/14 Javascript
Javascript显示和隐藏ul列表的方法
2015/07/15 Javascript
js实现TAB切换对应不同颜色的代码
2015/08/31 Javascript
基于JavaScript实现智能右键菜单
2016/03/02 Javascript
浅谈jQuery animate easing的具体使用方法(推荐)
2016/06/17 Javascript
Angular.js 实现数字转换汉字实例代码
2016/07/14 Javascript
JavaScript兼容浏览器FF/IE技巧
2016/08/14 Javascript
nodejs redis 发布订阅机制封装实现方法及实例代码
2016/12/15 NodeJs
Angular2入门教程之模块和组件详解
2017/05/28 Javascript
Vue 项目部署到服务器的问题解决方法
2017/12/05 Javascript
总结js中的一些兼容性易错的问题
2017/12/18 Javascript
webstorm中配置Eslint的两种方式及差异比较详解
2018/10/19 Javascript
详解element-ui表格中勾选checkbox,高亮当前行
2019/09/02 Javascript
小程序接入腾讯位置服务的详细流程
2020/03/03 Javascript
Vue中ref和$refs的介绍以及使用方法示例
2021/01/11 Vue.js
[01:38:19]夜魇凡尔赛茶话会 第五期
2021/03/11 DOTA
详解python 降级到3.6终极解决方案
2020/02/06 Python
Pandas替换及部分替换(replace)实现流程详解
2020/10/12 Python
TripAdvisor德国:全球领先的旅游网站
2017/12/07 全球购物
Lulu & Georgia官方网站:购买地毯、家具、抱枕、壁纸、床上用品等
2018/03/19 全球购物
TripAdvisor斯洛伐克:阅读评论、比较价格和酒店预订
2018/04/25 全球购物
电子商务专业在校生实习自我鉴定
2013/09/29 职场文书
小学毕业家长寄语
2014/01/19 职场文书
学生会宣传部部长竞选演讲稿
2014/04/25 职场文书
2014年教师党员公开承诺书
2014/05/28 职场文书
大学生党员个人剖析材料
2014/10/08 职场文书
2015年元旦促销方案书
2014/12/09 职场文书
舞蹈社团活动总结
2015/05/07 职场文书