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 相关文章推荐
IE event.srcElement和FF event.target 功能比较
Mar 01 Javascript
js window.open弹出新的网页窗口
Jan 16 Javascript
JS+CSS实现带关闭按钮DIV弹出窗口的方法
Feb 27 Javascript
jQuery实现带分组数据的Table表头排序实例分析
Nov 24 Javascript
jQuery实现监控页面所有ajax请求的方法
Dec 10 Javascript
理解Javascript文件动态加载
Jan 29 Javascript
Bootstrap编写一个在当前网页弹出可关闭的对话框 非弹窗
Jun 30 Javascript
js 自带的 map() 方法全面了解
Aug 16 Javascript
jQuery实现简易的输入框字数计数功能示例
Jan 16 Javascript
Vue js 的生命周期(看了就懂)(推荐)
Mar 29 Javascript
Layui数据表格之单元格编辑方式
Oct 26 Javascript
vue点击Dashboard不同内容 跳转到同一表格的实例
Nov 13 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
使用XDebug调试及单元测试覆盖率分析
2011/01/27 PHP
php array_intersect比array_diff快(附详细的使用说明)
2011/07/03 PHP
php计算两个文件相对路径的方法
2015/03/14 PHP
PHP会员找回密码功能的简单实现
2016/09/05 PHP
PHP实现二维数组(或多维数组)转换成一维数组的常见方法总结
2019/12/04 PHP
jquery imgareaselect 使用利用js与程序结合实现图片剪切
2009/07/30 Javascript
toggle一个div显示或隐藏且可扩展成自定义下拉框
2013/09/12 Javascript
JS实现的5级联动Select下拉选择框实例
2015/08/17 Javascript
JS+CSS实现带小三角指引的滑动门效果
2015/09/22 Javascript
JavaScript中boolean类型之三种情景实例代码
2016/11/21 Javascript
移动端基础事件总结与应用
2017/01/12 Javascript
详解vue.js2.0父组件点击触发子组件方法
2017/05/10 Javascript
深入浅析Vue.js中 computed和methods不同机制
2018/03/22 Javascript
Vue下路由History模式打包后页面空白的解决方法
2018/06/29 Javascript
小程序实现图片预览裁剪插件
2019/11/22 Javascript
js实现倒计时秒杀效果
2020/03/25 Javascript
jQuery中event.target和this的区别详解
2020/08/13 jQuery
Vue组件通信$attrs、$listeners实现原理解析
2020/09/03 Javascript
详解JavaScript数据类型和判断方法
2020/09/04 Javascript
手写Vue2.0 数据劫持的示例
2021/03/04 Vue.js
[02:24]DOTA2痛苦女王 英雄基础教程
2013/11/26 DOTA
python实现字符串加密 生成唯一固定长度字符串
2019/03/22 Python
Python实现图片查找轮廓、多边形拟合、最小外接矩形代码
2020/07/14 Python
关于python中remove的一些坑小结
2021/01/04 Python
html5 postMessage前端跨域并前端监听的方法示例
2018/11/01 HTML / CSS
美国知名的家庭连锁百货商店:Boscov’s
2017/07/27 全球购物
Mio Skincare法国官网:身体紧致及孕期身体护理
2018/04/04 全球购物
外语专业毕业生个人的自荐信
2013/11/19 职场文书
空气环保标语
2014/06/12 职场文书
出纳试用期工作总结2015
2015/05/28 职场文书
功夫熊猫观后感
2015/06/10 职场文书
心理健康教育培训研修感言
2015/11/18 职场文书
选对餐饮营销策略,营业额才会上涨
2019/08/27 职场文书
一文了解JavaScript用Element Traversal新属性遍历子元素
2021/11/27 Javascript
Python OpenCV实现图像模板匹配详解
2022/04/07 Python
Python实现双向链表
2022/05/25 Python