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 相关文章推荐
跨浏览器的设置innerHTML方法
Sep 18 Javascript
js对数字的格式化使用说明
Jan 12 Javascript
js判断游览器类型及版本号的代码
May 11 Javascript
jquery进行数组遍历如何跳出当前的each循环
Jun 05 Javascript
javascript函数中参数传递问题示例探讨
Jul 31 Javascript
JavaScript中的标签语句用法分析
Feb 10 Javascript
《JavaScript函数式编程》读后感
Aug 07 Javascript
jQuery防止重复绑定事件的解决方法
May 14 Javascript
jQuery实现的简单拖动层示例
Feb 22 Javascript
Vue修改mint-ui默认样式的方法
Feb 03 Javascript
使用jquery的cookie实现登录页记住用户名和密码的方法
Mar 13 jQuery
详解JavaScript中关于this指向的4种情况
Apr 18 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
用文本作数据处理
2006/10/09 PHP
用PHP实现将GB编码转换为UTF8
2006/11/25 PHP
php 文件上传代码(限制jpg文件)
2010/01/05 PHP
qq登录,新浪微博登录接口申请过程中遇到的问题
2014/07/22 PHP
又一个图片自动缩小的JS代码
2007/03/10 Javascript
javascript 选择文件夹对话框(web)
2009/07/07 Javascript
JavaScript 判断日期格式是否正确的实现代码
2011/07/04 Javascript
js判断两个日期是否相等的方法
2013/09/10 Javascript
使用非html5实现js板连连看游戏示例代码
2013/09/22 Javascript
IE下使用jQuery重置iframe地址时内存泄露问题解决办法
2015/02/05 Javascript
JavaScript常用函数工具集:lao-utils
2016/03/01 Javascript
js实现无缝滚动图(可控制当前滚动的方向)
2017/02/22 Javascript
Vue生命周期示例详解
2017/04/12 Javascript
nodejs个人博客开发第二步 入口文件
2017/04/12 NodeJs
jQuery实现菜单栏导航效果
2017/08/15 jQuery
Angular利用内容投射向组件输入ngForOf模板的方法
2018/03/05 Javascript
koa2使用ejs和nunjucks作为模板引擎的使用
2018/11/27 Javascript
antd组件Upload实现自己上传的实现示例
2018/12/18 Javascript
JS实现点击发送验证码 xx秒后重新发送功能
2019/07/30 Javascript
Python实现的FTP通信客户端与服务器端功能示例
2018/03/28 Python
python实现嵌套列表平铺的两种方法
2018/11/08 Python
Python魔法方法详解
2019/02/13 Python
用Cython加速Python到“起飞”(推荐)
2019/08/01 Python
解决Django中调用keras的模型出现的问题
2019/08/07 Python
使用PyTorch将文件夹下的图片分为训练集和验证集实例
2020/01/08 Python
python GUI库图形界面开发之PyQt5时间控件QTimer详细使用方法与实例
2020/02/26 Python
Python脚本去除文件的只读性操作
2020/03/05 Python
python GUI库图形界面开发之PyQt5信号与槽多窗口数据传递详细使用方法与实例
2020/03/08 Python
Django:使用filter的pk进行多值查询操作
2020/07/15 Python
css 元素选择器的简单实例
2016/05/23 HTML / CSS
英国独特家具和家庭用品购物网站:Cuckooland
2020/08/30 全球购物
质检部职责
2013/12/28 职场文书
简单英文演讲稿
2014/01/01 职场文书
2015年公共机构节能宣传周活动总结
2015/03/26 职场文书
二审答辩状范文
2015/05/22 职场文书
PHP设计模式(观察者模式)
2021/07/07 PHP