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之一
Apr 27 Javascript
非常不错的功能强大代码简单的管理菜单美化版
Jul 09 Javascript
鼠标移动到图片名上,显示图片的简单实例
Jul 14 Javascript
页面按钮禁用与解除禁用的方法
Feb 19 Javascript
jQuery实现区域打印功能代码详解
Jun 17 Javascript
JavaScript直播评论发弹幕切图功能点集合效果代码
Jun 26 Javascript
javascript 四十条常用技巧大全
Sep 09 Javascript
jQuery EasyUI结合zTree树形结构制作web页面
Sep 01 jQuery
vue中改变滚动条样式的方法
Mar 03 Javascript
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
Apr 01 jQuery
js实现浏览器打印功能的示例代码
Jul 15 Javascript
JavaScript声明变量和数据类型的转换
Apr 12 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验证session无效的解决方法
2014/11/04 PHP
深入浅析PHP7.0新特征(五大新特征)
2015/10/29 PHP
PHP获取文本框、密码域、按钮的值实例代码
2017/04/19 PHP
PHPExcel中文帮助手册|PHPExcel使用方法(分享)
2017/06/09 PHP
php解决约瑟夫环算法实例分析
2019/09/30 PHP
yii框架结合charjs统计上一年与当前年数据的方法示例
2020/04/04 PHP
网站导致浏览器崩溃的原因总结(多款浏览器) 推荐
2010/04/15 Javascript
js中判断控件是否存在
2010/08/25 Javascript
js中substring和substr的详细介绍与用法
2013/08/29 Javascript
告诉你什么是javascript的回调函数
2014/09/04 Javascript
javascript实现拖动元素交换位置
2015/11/29 Javascript
bootstrap实现弹窗和拖动效果
2016/01/03 Javascript
微信小程序开发入门基础教程
2017/04/19 Javascript
微信小程序获取循环元素id以及wx.login登录操作
2017/08/17 Javascript
JS实现关键词高亮显示正则匹配
2018/06/22 Javascript
JavaScript设计模式之职责链模式应用示例
2018/08/07 Javascript
JavaScript中十种一步拷贝数组的方法实例详解
2019/04/22 Javascript
浅谈vue异步数据影响页面渲染
2019/10/29 Javascript
整理 node-sass 安装失败的原因及解决办法(小结)
2020/02/19 Javascript
python关闭windows进程的方法
2015/04/18 Python
Python网络爬虫项目:内容提取器的定义
2016/10/25 Python
轻松理解Python 中的 descriptor
2017/09/15 Python
Python通过matplotlib画双层饼图及环形图简单示例
2017/12/15 Python
Python打开文件、文件读写操作、with方式、文件常用函数实例分析
2020/01/07 Python
Python matplotlib修改默认字体的操作
2020/03/05 Python
基于django micro搭建网站实现加水印功能
2020/05/22 Python
python如何代码集体右移
2020/07/20 Python
moosejaw旗下的户外商品促销网站:Mountain Steals
2017/02/27 全球购物
英国最大的在线奢侈手表零售商:Jura Watches
2018/01/29 全球购物
泰国王权免税店官方网站:KingPower
2019/03/11 全球购物
酒店公关部经理岗位职责
2013/11/24 职场文书
机关单位动员会主持词
2014/03/20 职场文书
家属慰问信
2015/02/14 职场文书
护士长2015年终工作总结
2015/04/24 职场文书
2015年前台文员工作总结
2015/05/18 职场文书
《中国机长》观后感:敬畏生命,敬畏职责
2019/11/12 职场文书