jQuery获取页面及个元素高度、宽度的总结——超实用


Posted in Javascript onJuly 28, 2015

下面把jQuery获取页面及个元素高度、宽度的方法汇总,分享给大家。

获取浏览器显示区域(可视区域)的高度 :  

$(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(在元素的包含元素含滚动条的情况下)
obj.offset().top;
设置或返回已经滚动到元素的左边界或上边界的像素数。简单地说,就是设置或者获取匹配元素相对滚动条上侧或者左侧的偏移。只有在元素有滚动条的时候,例如,元素的 CSS overflow 属性设置为 auto 的时候,这些像素才有用。这些属性也只在文档的 <body><html> 标记上定义(这和浏览器有关),并且一起来制定滚动文档的位置。注意,这些属性并不会指定一个 <iframe> 标记的滚动量。这是非标准的但却得到很好支持的属性

以上就是本文介绍的全部内容,希望大家喜欢。

Javascript 相关文章推荐
简单实用的js调试logger组件实现代码
Nov 20 Javascript
JavaScript 判断日期格式是否正确的实现代码
Jul 04 Javascript
jquery中的$(document).ready()使用小结
Feb 14 Javascript
直接在JS里创建JSON数据然后遍历使用
Jul 25 Javascript
jQuery+CSS实现的网页二级下滑菜单效果
Aug 25 Javascript
JavaScript实现非常简单实用的下拉菜单效果
Aug 27 Javascript
javascript实现二级级联菜单的简单制作
Nov 19 Javascript
JS动态创建元素的两种方法
Apr 20 Javascript
Jquery鼠标放上去显示全名的实现方法
Feb 06 Javascript
js实现省市级联效果分享
Aug 10 Javascript
JS实现去除数组中重复json的方法示例
Dec 21 Javascript
vue 实现路由跳转时更改页面title
Nov 05 Javascript
简单的jQuery入门指引
Jul 28 #Javascript
PageSwitch插件实现100种不同图片切换效果
Jul 28 #Javascript
异步JavaScript编程中的Promise使用方法
Jul 28 #Javascript
使用Browserify配合jQuery进行编程的超级指南
Jul 28 #Javascript
使用AmplifyJS组件配合JavaScript进行编程的指南
Jul 28 #Javascript
JavaScript编程中的Promise使用大全
Jul 28 #Javascript
javascript+html5实现绘制圆环的方法
Jul 28 #Javascript
You might like
Mysql的GROUP_CONCAT()函数使用方法
2008/03/28 PHP
php微信公众平台开发(三)订阅事件处理
2016/12/06 PHP
PHP使用第三方即时获取物流动态实例详解
2017/04/27 PHP
JSON 编辑器实现代码
2009/12/06 Javascript
js获取php变量的实现代码
2013/08/10 Javascript
javascript 函数及作用域总结介绍
2013/11/12 Javascript
Flow之一个新的Javascript静态类型检查器
2015/12/21 Javascript
jQuery操作Table技巧大汇总
2016/01/23 Javascript
JS随机打乱数组的方法小结
2016/06/22 Javascript
一种基于浏览器的自动小票机打印实现方案(js版)
2016/07/26 Javascript
基于jQuery实现仿微博发布框字数提示
2016/07/27 Javascript
jquery过滤特殊字符',防sql注入的实现方法
2016/08/17 Javascript
BootStrap中按钮点击后被禁用按钮的最佳实现方法
2016/09/23 Javascript
移动端手指放大缩小插件与js源码
2017/05/22 Javascript
Vue-router结合transition实现app前进后退动画切换效果的实例
2017/10/11 Javascript
JS获取子节点、父节点和兄弟节点的方法实例总结
2018/07/06 Javascript
VUEX采坑之路之获取不到$store的解决方法
2019/11/08 Javascript
[00:58]他们到底在电话里听到了什么?
2017/11/21 DOTA
[03:17]史诗级大片应援2018DOTA2国际邀请赛 致敬每一位坚守遗迹的勇士
2018/07/20 DOTA
Python判断文件和文件夹是否存在的方法
2015/05/21 Python
Python Xml文件添加字节属性的方法
2018/03/31 Python
python调用函数、类和文件操作简单实例总结
2019/11/29 Python
python中wheel的用法整理
2020/06/15 Python
如何避免常见的6种HTML5错误用法
2017/11/06 HTML / CSS
新西兰购物网站:TheMarket NZ
2020/09/19 全球购物
简述索引存取方法的作用和建立索引的原则
2013/03/26 面试题
项目开发计划书
2014/01/09 职场文书
职工擅自离岗检讨书
2014/09/23 职场文书
2014卖家双十一活动策划书
2014/09/29 职场文书
上课玩手机的检讨书
2014/10/01 职场文书
技术员岗位职责范本
2015/04/11 职场文书
项目技术负责人岗位职责
2015/04/13 职场文书
毕业证明书
2015/06/19 职场文书
2016教师给学生的毕业寄语
2015/12/04 职场文书
浅谈Go语言多态的实现与interface使用
2021/06/16 Golang
Hive日期格式转换方法总结
2022/06/25 数据库