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 相关文章推荐
javascript Window及document对象详细整理
Jan 12 Javascript
用js判断页面是否加载完成实现代码
Dec 11 Javascript
Js 回车换行处理的办法及replace方法应用
Jan 24 Javascript
js中setTimeout()与clearTimeout()用法实例浅析
May 12 Javascript
js判断图片加载完成后获取图片实际宽高的方法
Feb 25 Javascript
在js中实现邮箱格式的验证方法(推荐)
Oct 24 Javascript
js, jQuery实现全选、反选功能
Mar 08 Javascript
Vue实现侧边菜单栏手风琴效果实例代码
May 31 Javascript
Vue中fragment.js使用方法小结
Feb 17 Javascript
js 函数性能比较方法
Aug 24 Javascript
vue中实现点击空白区域关闭弹窗的两种方法
Dec 30 Vue.js
vue组件的路由高亮问题解决方法
May 11 Vue.js
简单的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
解决163/sohu/sina不能够收到PHP MAIL函数发出邮件的问题
2009/03/13 PHP
PHP strip_tags()去除HTML、XML以及PHP的标签介绍
2014/02/18 PHP
PHP实现基于回溯法求解迷宫问题的方法详解
2017/08/17 PHP
php实现session共享的实例方法
2019/09/19 PHP
用XMLDOM和ADODB.Stream实现base64编码解码实现代码
2010/11/28 Javascript
jQuery对Select的操作大集合(收藏)
2013/12/28 Javascript
5个JavaScript经典面试题
2014/10/13 Javascript
jQuery中map()方法用法实例
2015/01/06 Javascript
Backbone.js中的集合详解
2015/01/14 Javascript
angularJS 中input示例分享
2015/02/09 Javascript
jquery遍历json对象集合详解
2016/05/18 Javascript
AngularJS基础 ng-if 指令用法
2016/08/01 Javascript
浅谈AngularJS中ng-class的使用方法
2016/11/11 Javascript
如何提高数据访问速度
2016/12/26 Javascript
Canvas实现放射线动画效果
2017/02/15 Javascript
JS简单获取并修改input文本框内容的方法示例
2018/04/08 Javascript
JavaScript数据结构与算法之二叉树实现查找最小值、最大值、给定值算法示例
2019/03/01 Javascript
Node.js使用supervisor进行开发中调试的方法
2019/03/26 Javascript
在Vue中用canvas实现二维码和图片合成海报的方法
2019/06/10 Javascript
JS实现星星海特效
2019/12/24 Javascript
微信小程序利用button控制条件标签的变量问题
2020/03/15 Javascript
[02:01]大师之路——DOTA2完美大师赛11月论剑上海
2017/11/06 DOTA
Python解析xml中dom元素的方法
2015/03/12 Python
用Python展示动态规则法用以解决重叠子问题的示例
2015/04/02 Python
Python编程使用NLTK进行自然语言处理详解
2017/11/16 Python
英国轻奢珠宝品牌:Astley Clarke
2016/12/18 全球购物
希尔顿酒店官方网站:Hilton Hotels
2017/06/01 全球购物
英国著名药妆店:Superdrug
2021/02/13 全球购物
端口镜像是怎么实现的
2014/03/25 面试题
音乐专业应届生教师求职信
2013/11/04 职场文书
经典导游欢迎词大全
2014/01/16 职场文书
优秀护士获奖感言
2014/02/20 职场文书
《陋室铭》教学反思
2014/02/26 职场文书
小学一年级评语大全
2014/04/22 职场文书
民主评议党员自我评价材料
2014/09/18 职场文书
教师党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书