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 相关文章推荐
编写针对IE的JS代码两种编写方法
Jan 30 Javascript
js判断滚动条是否已到页面最底部或顶部实例
Nov 20 Javascript
使用VS开发 Node.js指南
Jan 06 Javascript
JavaScript中的原型prototype属性使用详解
Jun 05 Javascript
继续学习javascript闭包
Dec 03 Javascript
canvas滤镜效果实现代码
Feb 06 Javascript
利用Angular.js编写公共提示模块的方法教程
May 28 Javascript
JS实现unicode和UTF-8之间的互相转换互转
Jul 05 Javascript
JS遍历DOM文档树的方法实例详解
Apr 03 Javascript
JavaScript实现读取与输出XML文件数据的方法示例
Jun 05 Javascript
学习使用ExpressJS 4.0中的新Router的用法
Nov 06 Javascript
通过jQuery学习js类型判断的技巧
May 27 jQuery
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
一个显示某段时间内每个月的方法 返回由这些月份组成的数组
2012/05/16 PHP
PHP header()函数使用详细(301、404等错误设置)
2013/04/17 PHP
邮箱正则表达式实现代码(针对php)
2013/06/21 PHP
jQuery 源代码显示控件 (Ajax加载方式).
2009/05/18 Javascript
jquery mobile动态添加元素之后不能正确渲染解决方法说明
2014/03/05 Javascript
jsPDF导出pdf示例
2014/05/02 Javascript
JavaScript中统计Textarea字数并提示还能输入的字符
2014/06/10 Javascript
JavaScript利用正则表达式去除日期中的“-”
2014/07/01 Javascript
javascript使用avalon绑定实现checkbox全选
2015/05/06 Javascript
JQ技术实现注册页面带有校验密码强度
2015/07/27 Javascript
jQuery随手笔记之常用的jQuery操作DOM事件
2015/11/29 Javascript
jQuery中选择器的基础使用教程
2016/05/23 Javascript
Angularjs手动解析表达式($parse)
2016/10/12 Javascript
Bootbox将后台JSON数据填充Form表单的实例代码
2018/09/10 Javascript
vue中的watch监听数据变化及watch中各属性的详解
2018/09/11 Javascript
vue-cli3.0 脚手架搭建项目的过程详解
2018/10/19 Javascript
小程序扫描普通链接二维码跳转小程序指定界面方法
2019/05/07 Javascript
javascript合并两个数组最简单的实现方法
2019/09/14 Javascript
vue输入节流,避免实时请求接口的实例代码
2019/10/30 Javascript
js实现漂亮的星空背景
2019/11/01 Javascript
vue实现将一个数组内的相同数据进行合并
2019/11/07 Javascript
Python实现的文本简单可逆加密算法示例
2017/05/18 Python
Numpy截取指定范围内的数据方法
2018/11/14 Python
python GUI库图形界面开发之PyQt5时间控件QTimer详细使用方法与实例
2020/02/26 Python
5分钟实现Canvas鼠标跟随动画背景
2019/11/18 HTML / CSS
Timberland俄罗斯官方网上商店:全球领先的户外品牌
2020/03/15 全球购物
销售冠军获奖感言
2014/02/03 职场文书
竞选文艺委员演讲稿
2014/04/28 职场文书
法制宣传日活动总结
2014/04/29 职场文书
教师节标语大全
2014/10/07 职场文书
党的群众路线批评与自我批评发言稿
2014/10/16 职场文书
爱牙日宣传活动总结
2015/02/05 职场文书
电力安全教育培训心得体会
2016/01/11 职场文书
idea搭建可运行Servlet的Web项目
2021/06/26 Java/Android
vue中利用mqtt服务端实现即时通讯的步骤记录
2021/07/01 Vue.js
nginx刷新页面出现404解决方案(亲测有效)
2022/03/18 Servers