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常考语句107条收集
Mar 09 Javascript
jQuery验证Checkbox是否选中的代码 推荐
Sep 04 Javascript
JavaScript等比例缩放图片控制超出范围的图片
Aug 06 Javascript
js弹窗返回值详解(window.open方式)
Jan 11 Javascript
JS调试必备的5个debug技巧
Mar 07 Javascript
jQuery使用slideUp方法实现控制元素缓慢收起
Mar 27 Javascript
jQuery实现div横向拖拽排序的简单实例
Jul 13 Javascript
移动端翻页插件dropload.js(支持Zepto和jQuery)
Jul 27 Javascript
Javascript中常用的检测方法小结
Oct 08 Javascript
JS常用正则表达式总结【经典】
May 12 Javascript
ES6 javascript中class静态方法、属性与实例属性用法示例
Oct 30 Javascript
如何用JavaScript检测当前浏览器是无头浏览器
Apr 27 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
在PHP里得到前天和昨天的日期的代码
2007/08/16 PHP
PHP Zip压缩 在线对文件进行压缩的函数
2010/05/26 PHP
PHP之COOKIE支持详解
2010/09/20 PHP
php-perl哈希算法实现(times33哈希算法)
2013/12/30 PHP
php实现获取局域网所有用户的电脑IP和主机名、及mac地址完整实例
2014/07/18 PHP
数组任意位置插入元素,删除特定元素的实例
2017/03/02 PHP
修改yii2.0用户登录使用的user表为其它的表实现方法(推荐)
2017/08/01 PHP
BOM与DOM的区别分析
2010/10/26 Javascript
javascript中数组的定义及使用实例
2015/01/21 Javascript
JS中产生标识符方式的演变
2015/06/12 Javascript
AngularJS入门教程之迭代器过滤详解
2016/08/18 Javascript
详解angular用$sce服务来过滤HTML标签
2017/04/11 Javascript
JavaScript算法教程之sku(库存量单位)详解
2017/06/29 Javascript
使用JavaScript实现点击循环切换图片效果
2017/09/03 Javascript
基于twbsPagination.js分页插件使用心得(分享)
2017/10/21 Javascript
iview在vue-cli3如何按需加载的方法
2018/10/31 Javascript
实现Vue的markdown文档可以在线运行的方法示例
2018/12/11 Javascript
JS中超越现实的匿名函数用法实例分析
2019/06/21 Javascript
浅谈vue中$event理解和框架中在包含默认值外传参
2020/08/07 Javascript
[32:26]EG vs IG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python使用稀疏矩阵节省内存实例
2014/06/27 Python
python实现文件的备份流程详解
2019/06/18 Python
Python 中Django验证码功能的实现代码
2019/06/20 Python
Python数据持久化存储实现方法分析
2019/12/21 Python
Centos7下源码安装Python3 及shell 脚本自动安装Python3的教程
2020/03/07 Python
scrapy爬虫:scrapy.FormRequest中formdata参数详解
2020/04/30 Python
html5指南-4.使用Geolocation实现定位功能
2013/01/07 HTML / CSS
入党自我鉴定范文
2013/10/04 职场文书
广播电视新闻学专业应届生求职信
2013/10/08 职场文书
老公给老婆的道歉信
2014/01/10 职场文书
校园创业策划书
2014/01/14 职场文书
优秀毕业生事迹材料
2014/02/12 职场文书
承租经营合作者协议书
2014/10/01 职场文书
机动车登记业务委托书
2014/10/08 职场文书
2016年校园重阳节广播稿
2015/12/18 职场文书
详解python的异常捕获
2022/03/03 Python