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 相关文章推荐
javascript 放大镜 v1.0 基于Yui2 实现的放大镜效果
Mar 08 Javascript
基于RequireJS和JQuery的模块化编程日常问题解析
Apr 14 Javascript
JavaScript中split与join函数的进阶使用技巧
May 03 Javascript
适用于手机端的jQuery图片滑块动画
Dec 09 Javascript
JS实现获取来自百度,Google,soso,sogou关键词的方法
Dec 21 Javascript
JavaScript实现AOP详解(面向切面编程,装饰者模式)
Dec 19 Javascript
Vue+webpack项目配置便于维护的目录结构教程详解
Oct 14 Javascript
小程序实现选择题选择效果
Nov 04 Javascript
Angular事件之不同组件间传递数据的方法
Nov 15 Javascript
详解ES6系列之私有变量的实现
Nov 21 Javascript
浅谈KOA2 Restful方式路由初探
Mar 14 Javascript
node.js爬虫框架node-crawler初体验
Oct 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获取当前所在目录位置的方法
2014/11/26 PHP
php判断当前用户已在别处登录的方法
2015/01/06 PHP
php从数据库查询结果生成树形列表的方法
2015/04/17 PHP
PHP实现适用于文件内容操作的分页类
2016/06/15 PHP
php实现二叉树中和为某一值的路径方法
2018/10/14 PHP
PHP设计模式(六)桥连模式Bridge实例详解【结构型】
2020/05/02 PHP
jQuery 打造动态渐变按钮 详细图文教程
2010/04/25 Javascript
JavaScript代码轻松实现网页内容禁止复制(代码简单)
2015/10/23 Javascript
js匿名函数作为函数参数详解
2016/06/01 Javascript
AngularJS在IE下取数据总是缓存问题的解决方法
2016/08/05 Javascript
微信小程序 swiper组件轮播图详解及实例
2016/11/16 Javascript
微信小程序 视图容器组件的详解及实例代码
2017/01/19 Javascript
JavaScript的for循环中嵌套一个点击事件的问题解决
2017/03/03 Javascript
js实现表格单列按字母排序
2020/08/12 Javascript
Vue项目如何引入bootstrap、elementUI、echarts
2020/11/26 Vue.js
Python-基础-入门 简介
2014/08/09 Python
Python 内置函数memoryview(obj)的具体用法
2017/11/23 Python
python logging日志模块以及多进程日志详解
2018/04/18 Python
python实现五子棋程序
2020/04/24 Python
利用Python实现Excel的文件间的数据匹配功能
2020/06/16 Python
python爬取抖音视频的实例分析
2021/01/19 Python
HTML5本地数据库基础操作详解
2016/04/26 HTML / CSS
中国高端家电购物商城:顺电
2018/03/04 全球购物
匡威意大利官方商店 :Converse意大利
2018/11/27 全球购物
Ajax主要包含了哪些技术
2014/06/12 面试题
大学生职业生涯规划书模板
2014/01/18 职场文书
初中同学聚会邀请函
2014/02/03 职场文书
公司年会策划方案
2014/05/17 职场文书
学习党代会心得体会
2014/09/05 职场文书
社区扶贫帮困工作总结
2015/05/20 职场文书
2016年“12.4”法制宣传日活动总结
2016/04/01 职场文书
利用ajax+php实现商品价格计算
2021/03/31 PHP
golang 实现时间戳和时间的转化
2021/05/07 Golang
Keras在mnist上的CNN实践,并且自定义loss函数曲线图操作
2021/05/25 Python
Python中文纠错的简单实现
2021/07/07 Python
Java实现带图形界面的聊天程序
2022/06/10 Java/Android