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 Tabs插件宿主IFRAMES
Jan 01 Javascript
Javascript学习笔记2 函数
Jan 11 Javascript
google jQuery 引用文件,jQuery 引用地址集合(jquery 1.2.6至jquery1.5.2)
Apr 24 Javascript
基于jquery实现的鼠标拖拽元素复制并写入效果
Aug 23 Javascript
JS获取下拉列表所选中的TEXT和Value的实现代码
Jan 11 Javascript
javascript基本包装类型介绍
Apr 10 Javascript
JavaScript实现网站访问次数统计代码
Aug 12 Javascript
Struts2+jquery.form.js实现图片与文件上传的方法
May 05 Javascript
BootStrap与Select2使用小结
Feb 17 Javascript
JavaScript观察者模式(publish/subscribe)原理与实现方法
Mar 30 Javascript
javascript前端实现多视频上传
Dec 13 Javascript
Vue 数据响应式相关总结
Jan 28 Vue.js
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验证码类
2016/09/29 PHP
javascript 装载iframe子页面,自适应高度
2009/03/20 Javascript
ext combobox动态加载数据库数据(附前后台)
2014/06/17 Javascript
node.js开发中使用Node Supervisor实现监测文件修改并自动重启应用
2014/11/04 Javascript
javascript中Date对象的getDay方法使用指南
2014/12/22 Javascript
详解vue.js数据传递以及数据分发slot
2018/01/20 Javascript
安装Node.js并启动本地服务的操作教程
2018/05/12 Javascript
vue生成文件本地打开查看效果的实例
2018/09/06 Javascript
解决layui-open关闭自身窗口的问题
2019/09/10 Javascript
vue中上传视频或图片或图片和文字一起到后端的解决方法
2019/12/01 Javascript
详解javascript脚本何时会被执行
2021/02/05 Javascript
python 字符串格式化代码
2013/03/17 Python
Python实现将目录中TXT合并成一个大TXT文件的方法
2015/07/15 Python
Python cookbook(数据结构与算法)将序列分解为单独变量的方法
2018/02/13 Python
Numpy 改变数组维度的几种方法小结
2018/08/02 Python
Python学习笔记之图片人脸检测识别实例教程
2019/03/06 Python
Python3字符串encode与decode的讲解
2019/04/02 Python
Python3的高阶函数map,reduce,filter的示例详解
2019/07/23 Python
Django框架model模型对象验证实现方法分析
2019/10/02 Python
兰蔻美国官网:Lancome美国
2017/04/25 全球购物
Desigual德国官网:在线购买原创服装
2018/03/27 全球购物
澳大利亚排名第一的狂热牛仔品牌:ONETEASPOON
2018/11/20 全球购物
德国二手设计师时装和复古时装跳蚤市场:Mädchenflohmarkt
2020/11/09 全球购物
存储过程和sql语句的优缺点
2014/07/02 面试题
销售人员自我评价怎么写
2013/09/19 职场文书
思想汇报范文
2013/11/04 职场文书
药品质量检测应届生求职信
2013/11/14 职场文书
西式婚礼证婚词
2014/01/12 职场文书
主题实践活动总结
2014/05/08 职场文书
土木工程毕业答辩开场白
2015/05/29 职场文书
通讯稿格式及范文
2015/07/22 职场文书
2015年城管执法工作总结
2015/07/23 职场文书
幼儿园托班开学寄语(2016秋季)
2015/12/03 职场文书
MySQL表的增删改查(基础)
2021/04/05 MySQL
Win10 Anaconda安装python-pcl
2022/04/29 Servers
Python使用openpyxl模块处理Excel文件
2022/06/05 Python