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 提交值不为空的元素示例代码
May 10 Javascript
超炫的jquery仿flash导航栏特效
Nov 11 Javascript
jQuery使用之处理页面元素用法实例
Jan 19 Javascript
JavaScript中string对象
Jun 12 Javascript
轻松实现Bootstrap图片轮播
Apr 20 Javascript
简介BootStrap model弹出框的使用
Apr 27 Javascript
jQuery增加和删除表格项目及实现表格项目排序的方法
May 30 Javascript
jquery.validate使用详解
Jun 02 Javascript
微信小程序实现图片预加载组件
Jan 18 Javascript
利用ES6实现单例模式及其应用详解
Dec 09 Javascript
JS操作字符串转数字的常见方法示例
Oct 29 Javascript
让Vue响应Map或Set的变化操作
Nov 11 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文件操作实现代码分享
2011/09/01 PHP
php生成验证码函数
2015/10/20 PHP
前端必学之PHP语法基础
2016/01/01 PHP
Yii2框架类自动加载机制实例分析
2018/05/02 PHP
JavaScript语法着色引擎(demo及打包文件下载)
2007/06/13 Javascript
jquery 实现checkbox全选,反选,全不选等功能代码(奇数)
2012/10/24 Javascript
关于JS判断图片是否加载完成且获取图片宽度的方法
2013/04/09 Javascript
原生的html元素选择器类似jquery选择器
2014/10/15 Javascript
nodejs教程之制作一个简单的文章发布系统
2014/11/21 NodeJs
javascript实现倒计时N秒后网页自动跳转代码
2014/12/11 Javascript
JS实现鼠标点击展开或隐藏表格行的方法
2015/03/03 Javascript
jquery-mobile基础属性与用法详解
2016/11/23 Javascript
浅谈jQuery的bind和unbind事件(绑定和解绑事件)
2017/03/02 Javascript
解决React Native端口号修改的方法
2017/07/28 Javascript
Angular利用内容投射向组件输入ngForOf模板的方法
2018/03/05 Javascript
JavaScript文本特效实例小结【3个示例】
2018/12/22 Javascript
详解js 创建对象的几种方法
2019/03/08 Javascript
Nuxt.js实战和配置详解
2019/08/05 Javascript
vue实现页面内容禁止选中功能,仅输入框和文本域可选
2019/11/09 Javascript
Vue实现仿iPhone悬浮球的示例代码
2020/03/13 Javascript
Vue——解决报错 Computed property "****" was assigned to but it has no setter.
2020/12/19 Vue.js
JS实现鼠标移动拖尾
2020/12/27 Javascript
[03:58]兄弟们,回来开黑了!DOTA2昔日战友招募宣传视频
2016/07/17 DOTA
[37:03]完美世界DOTA2联赛PWL S3 INK ICE vs GXR 第二场 12.16
2020/12/18 DOTA
python 实现图片裁剪小工具
2021/02/02 Python
东南亚排名第一的服务市场:kaodim
2019/03/28 全球购物
C/C++程序员常见面试题一
2012/12/08 面试题
什么是数据抽象
2016/11/26 面试题
学校办公室主任职责
2013/12/27 职场文书
报到证丢失证明
2014/01/11 职场文书
先进个人总结范文
2015/02/15 职场文书
项目技术负责人岗位职责
2015/04/13 职场文书
储备店长岗位职责
2015/04/14 职场文书
2015年施工员工作总结范文
2015/04/20 职场文书
公司仓库管理制度
2015/08/04 职场文书
OpenCV项目实践之停车场车位实时检测
2022/04/11 Python