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的遍历同id元素 并响应事件的代码
Jun 14 Javascript
JavaScript动态创建div属性和样式示例代码
Oct 09 Javascript
JS模式之简单的订阅者和发布者模式完整实例
Jun 30 Javascript
SWFObject基本用法实例分析
Jul 20 Javascript
jQuery菜单插件用法实例
Jul 25 Javascript
Javascript实现网络监测的方法
Jul 31 Javascript
Bootstrap每天必学之基础排版
Nov 20 Javascript
js实现对ajax请求面向对象的封装
Jan 08 Javascript
jQuery实现下拉菜单(内容为时间)的实时更新及图表的随动更新的方法
Jul 07 Javascript
深入浅析Node环境和浏览器的区别
Aug 14 Javascript
Vue.js获取被选择的option的value和text值方法
Aug 24 Javascript
简单了解vue 插值表达式Mustache
Jul 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
乱谈我对耳机、音箱的感受
2021/03/02 无线电
用PHP函数解决SQL injection
2006/10/09 PHP
Warning: session_destroy() : Trying to destroy uninitialized sessionq错误
2011/06/16 PHP
php中使用session_set_save_handler()函数把session保存到MySQL数据库实例
2014/11/06 PHP
PHP Filter过滤器全面解析
2016/08/09 PHP
JavaScript入门学习书籍推荐
2008/06/12 Javascript
js播放wav文件(源码)
2013/04/22 Javascript
Js判断参数(String,Array,Object)是否为undefined或者值为空
2013/11/04 Javascript
jquery增加时编辑jqGrid(实例代码)
2013/11/08 Javascript
JavaScript动态修改背景颜色的方法
2015/04/16 Javascript
js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法
2015/08/11 Javascript
node+experss实现爬取电影天堂爬虫
2016/11/20 Javascript
实例浅析js的this
2016/12/11 Javascript
jQuery实现ajax无刷新分页页码控件
2017/02/28 Javascript
实用的Vue开发技巧
2019/05/30 Javascript
javaScript把其它类型转换为Number类型
2019/10/13 Javascript
vue父组件给子组件的组件传值provide inject的方法
2019/10/23 Javascript
jquery实现吸顶导航效果
2020/01/08 jQuery
django2.0扩展用户字段示例
2019/02/13 Python
Python之数据序列化(json、pickle、shelve)详解
2019/08/30 Python
python 如何将数据写入本地txt文本文件的实现方法
2019/09/11 Python
python利用openpyxl拆分多个工作表的工作簿的方法
2019/09/27 Python
python字符串替换re.sub()实例解析
2020/02/09 Python
python GUI库图形界面开发之PyQt5控件数据拖曳Drag与Drop详细使用方法与实例
2020/02/27 Python
pyinstaller打包单文件时--uac-admin选项不起作用怎么办
2020/04/15 Python
Python利用Pillow(PIL)库实现验证码图片的全过程
2020/10/04 Python
css3新增颜色表示方式分享
2014/04/15 HTML / CSS
医院护士党的群众路线教育实践活动对照检查材料思想汇报
2014/10/04 职场文书
2014七年级班主任工作总结
2014/12/05 职场文书
大足石刻导游词
2015/02/02 职场文书
2015年大学生社会实践评语
2015/03/26 职场文书
酒店人事专员岗位职责
2015/04/07 职场文书
超搞笑婚前保证书
2015/05/08 职场文书
应届毕业生的自我评价
2019/06/21 职场文书
python 自动刷新网页的两种方法
2021/04/20 Python
详细聊一聊mysql的树形结构存储以及查询
2022/04/05 MySQL