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画线(实例代码)
Nov 20 Javascript
javascript对话框使用方法(警告框 javascript确认框 提示框)
Jan 07 Javascript
通过location.replace禁止浏览器后退防止重复提交
Sep 04 Javascript
JQuery判断radio(单选框)是否选中和获取选中值方法总结
Apr 15 Javascript
js实现当复选框选择匿名登录时隐藏登录框效果
Aug 14 Javascript
js判断当前页面在移动设备还是在PC端中打开
Jan 06 Javascript
编写高质量JavaScript代码的基本要点
Mar 02 Javascript
js replace(a,b)之替换字符串中所有指定字符的方法
Aug 17 Javascript
jQuery布局组件EasyUI Layout使用方法详解
Feb 28 Javascript
详解如何让InstantClick兼容MathJax、百度统计等
Sep 12 Javascript
AngularJS模态框模板ngDialog的使用详解
May 11 Javascript
antd Form组件方法getFieldsValue获取自定义组件的值操作
Oct 29 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
IIS7.X配置PHP运行环境小结
2011/06/09 PHP
php通过COM类调用组件的实现代码
2012/01/11 PHP
php之curl设置超时实例
2014/11/03 PHP
PHP生成压缩文件实例
2015/02/07 PHP
php实现图片上传、剪切功能
2016/05/07 PHP
PHP中将一个字符串部分字符用星号*替代隐藏的实现代码
2019/09/08 PHP
laravel 5.5 关闭token的3种实现方式
2019/10/24 PHP
多个iframe自动调整大小的问题
2006/09/18 Javascript
IE7提供XMLHttpRequest对象为兼容
2007/03/08 Javascript
网上抓的一个特效
2007/05/11 Javascript
jquery下将选择的checkbox的id组成字符串的方法
2010/11/28 Javascript
jQuery实现锚点scoll效果实例分析
2015/03/10 Javascript
javascript断点调试心得分享
2016/04/23 Javascript
老生常谈javascript的类型转换
2016/10/12 Javascript
JS实现动态增加和删除li标签行的实例代码
2016/10/16 Javascript
jQuery实现圣诞节礼物传送(花式轮播)
2016/12/25 Javascript
微信小程序图片自适应支持多图实例详解
2017/06/21 Javascript
ES7中利用Await减少回调嵌套的方法详解
2017/11/01 Javascript
vue实现2048小游戏功能思路详解
2018/05/09 Javascript
微信小程序自定义弹窗wcPop插件
2018/11/19 Javascript
vue获取时间戳转换为日期格式代码实例
2019/04/17 Javascript
在layui中使用form表单监听ajax异步验证注册的实例
2019/09/03 Javascript
Python实现PS滤镜中马赛克效果示例
2018/01/20 Python
python flask解析json数据不完整的解决方法
2019/05/26 Python
Python 为什么推荐蛇形命名法原因浅析
2020/06/18 Python
Python中的流程控制详解
2021/02/18 Python
函数指针的定义是什么
2016/08/14 面试题
优秀工会工作者事迹材料
2014/06/02 职场文书
文化产业实施方案
2014/06/07 职场文书
含预算的公司户外活动方案
2014/08/16 职场文书
趣味运动会广播稿
2014/09/13 职场文书
行政工作试用期自我评价
2014/09/14 职场文书
经营场所使用证明
2015/06/19 职场文书
八年级作文之友谊
2019/12/02 职场文书
Python合并pdf文件的工具
2021/07/01 Python
python实现商品进销存管理系统
2022/05/30 Python