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遍历input取得input的name
Apr 27 Javascript
jQuery实现的动态伸缩导航菜单实例
May 07 Javascript
JavaScript合并两个数组并去除重复项的方法
Jun 13 Javascript
tuzhu_req.js 实现仿百度图片首页效果
Aug 11 Javascript
AngularJS基础 ng-init 指令简单示例
Aug 02 Javascript
ionic实现底部分享功能
May 11 Javascript
jQuery Validate格式验证功能实例代码(包括重名验证)
Jul 18 jQuery
Node.JS使用Sequelize操作MySQL的示例代码
Oct 09 Javascript
基于JSONP原理解析(推荐)
Dec 04 Javascript
深入理解 webpack 文件打包机制(小结)
Jan 08 Javascript
JQuery中queue方法用法示例
Jan 31 jQuery
JavaScript如何实现图片处理与合成
May 29 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可能遇到的问题“无法载入mysql扩展” 的解决方法
2007/04/16 PHP
简单的移动设备检测PHP脚本代码
2011/02/19 PHP
PHP的PSR规范中文版
2013/09/28 PHP
CentOS6.5 编译安装lnmp环境
2014/12/21 PHP
WordPress主题制作之模板文件的引入方法
2015/12/28 PHP
利用switch语句进行多选一判断的实例代码
2016/11/14 PHP
基础的prototype.js常用函数及其用法
2007/03/10 Javascript
关于JAVASCRIPT urldecode URL解码的问题
2012/01/08 Javascript
面向对象的Javascript之二(接口实现介绍)
2012/01/27 Javascript
js控制当再次点击按钮时的间隔时间
2014/06/03 Javascript
JavaScript创建闭包的两种方式的优劣与区别分析
2015/06/22 Javascript
谈谈基于iframe、FormData、FileReader三种无刷新上传文件的方法
2015/12/03 Javascript
实例讲解JS中setTimeout()的用法
2016/01/28 Javascript
JavaScript实现审核流程状态的动态显示进度条
2017/03/15 Javascript
angular ng-click防止重复提交实例
2017/06/16 Javascript
vue 简单自动补全的输入框的示例
2018/03/12 Javascript
解决Vue.js由于延时显示了{{message}}引用界面的问题
2018/08/25 Javascript
vue+Vue Router多级侧导航切换路由(页面)的实现代码
2018/12/20 Javascript
kafka调试中遇到Connection to node -1 could not be established. Broker may not be available.
2019/09/17 Javascript
[03:00]《DAC最前线》之欧美新秀VS老将
2015/02/01 DOTA
[00:10]DOTA2 TI9勇士令状明日上线
2019/05/07 DOTA
Python脚本实现下载合并SAE日志
2015/02/10 Python
Phantomjs抓取渲染JS后的网页(Python代码)
2016/05/13 Python
python计算auc指标实例
2017/07/13 Python
在ipython notebook中使用argparse方式
2020/04/20 Python
python爬虫可以爬什么
2020/06/16 Python
pytorch SENet实现案例
2020/06/24 Python
html5的画布canvas——画出弧线、旋转的图形实例代码+效果图
2013/06/09 HTML / CSS
主管职责范文
2013/11/09 职场文书
医药代表个人的求职信分享
2013/12/08 职场文书
放飞蜻蜓反思
2014/02/05 职场文书
大学生英语演讲稿
2014/04/24 职场文书
关于读书的演讲稿
2014/05/07 职场文书
企业公益活动策划方案
2014/08/24 职场文书
党员干部群众路线个人整改措施
2014/09/18 职场文书
Win11安装升级时提示“该电脑必须支持安全启动”
2022/04/19 数码科技