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 相关文章推荐
JS批量操作CSS属性详细解析
Dec 16 Javascript
javascript中的Function.prototye.bind
Jun 25 Javascript
JavaScript实现自动对页面上敏感词进行屏蔽的方法
Jul 27 Javascript
js鼠标单击和双击事件冲突问题的快速解决方法
Jul 11 Javascript
BootStrap入门教程(三)之响应式原理
Sep 19 Javascript
JavaScript实现带有子菜单和控件的slider轮播图效果
Nov 01 Javascript
jQuery实现简单的下拉菜单导航功能示例
Dec 07 jQuery
vue.js 2.*项目环境搭建、运行、打包发布的详细步骤
May 01 Javascript
如何在JavaScript中谨慎使用代码注释
Jun 21 Javascript
ES6 let和const定义变量与常量的应用实例分析
Jun 27 Javascript
Vue路由切换页面不更新问题解决方案
Jul 10 Javascript
原生JS实现分页
Apr 19 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网页后退不再出现过期
2007/03/08 PHP
php 删除cookie和浏览器重定向
2009/03/16 PHP
set_include_path和get_include_path使用及注意事项
2013/02/02 PHP
读jQuery之九 一些瑕疵说明
2011/06/21 Javascript
Javascript级联下拉菜单以及AJAX数据验证核心代码
2013/05/10 Javascript
如何使用Javascript正则表达式来格式化XML内容
2013/07/04 Javascript
js分页代码分享
2014/04/28 Javascript
jQuery插件MixItUp实现动画过滤和排序
2015/04/12 Javascript
BootStrap table删除指定行的注意事项(笔记整理)
2017/02/05 Javascript
JavaScript在控件上添加倒计时功能的实现代码
2017/07/04 Javascript
详解webpack进阶之loader篇
2017/08/23 Javascript
JavaScript门面模式详解
2017/10/19 Javascript
用js实现每隔一秒刷新时间的实例(含年月日时分秒)
2017/10/25 Javascript
nodejs前端模板引擎swig入门详解
2018/05/15 NodeJs
解决element-ui中下拉菜单子选项click事件不触发的问题
2018/08/22 Javascript
对angular 实时更新模板视图的方法$apply详解
2018/10/09 Javascript
微信小程序用户授权弹窗 拒绝时引导用户重新授权实现
2019/07/29 Javascript
vue select 获取value和lable操作
2020/08/28 Javascript
python控制台英汉汉英电子词典
2020/04/23 Python
Tensorflow实现卷积神经网络用于人脸关键点识别
2018/03/05 Python
Python使用progressbar模块实现的显示进度条功能
2018/05/31 Python
对python中for、if、while的区别与比较方法
2018/06/25 Python
Windows 64位下python3安装nltk模块
2018/09/19 Python
Python 异步协程函数原理及实例详解
2019/11/13 Python
html5-websocket基于远程方法调用的数据交互实现
2012/12/04 HTML / CSS
amazeui树节点自动展开折叠面板并选中第一个树节点的实现
2020/08/24 HTML / CSS
WSDL的操作类型主要有几种
2013/07/19 面试题
简历自我评价怎么写呢?
2014/01/06 职场文书
教师廉洁自律承诺书
2014/05/26 职场文书
广告学专业毕业生自荐信
2014/05/28 职场文书
2014年入党积极分子党校培训心得体会
2014/07/08 职场文书
城南旧事读书笔记
2015/06/29 职场文书
2016年第16个全民国防教育日宣传活动总结
2016/04/05 职场文书
经典励志格言:每日一句,让你每天充满能量
2019/08/16 职场文书
纯CSS如何禁止用户复制网页的内容
2021/11/01 HTML / CSS
从结婚开始的恋爱故事。小说《我的美好婚事》TV动画化决定
2022/04/07 日漫