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 相关文章推荐
关于__defineGetter__ 和__defineSetter__的说明
May 12 Javascript
IE/FireFox具备兼容性的拖动代码
Aug 13 Javascript
json 实例详细说明教程
Oct 31 Javascript
玩转方法:call和apply
May 08 Javascript
构造函数+原型模式构造js自定义对象(最通用)
May 12 Javascript
Javascript中With语句用法实例
May 14 Javascript
js实现iframe框架取值的方法(兼容IE,firefox,chrome等)
Nov 26 Javascript
jQuery ajax全局函数处理session过期后的ajax跳转问题
Jun 03 Javascript
js实现显示手机号码效果
Mar 09 Javascript
JS仿淘宝搜索框用户输入事件的实现
Jun 19 Javascript
在Vue项目中取消ESLint代码检测的步骤讲解
Jan 27 Javascript
原生javascript实现类似vue的数据绑定功能示例【观察者模式】
Feb 24 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 array_push()数组函数:将一个或多个单元压入数组的末尾(入栈)
2011/07/12 PHP
色色整理的PHP面试题集锦
2012/03/08 PHP
php设置编码格式的方法
2013/03/05 PHP
php中file_get_contents与curl性能比较分析
2014/11/08 PHP
WordPress中登陆后关闭登陆页面及设置用户不可见栏目
2015/12/31 PHP
Packer 3.0 JS压缩及混淆工具 下载
2007/05/03 Javascript
jquery.validate使用攻略 第三部
2010/07/01 Javascript
jquery实现图片左右间隔滚动特效(可自动播放)
2013/05/08 Javascript
JS实现文档加载完成后执行代码
2015/07/09 Javascript
Node.js编写组件的三种实现方式
2016/02/25 Javascript
jQuery使用each方法与for语句遍历数组示例
2016/06/16 Javascript
关于Javascript回调函数的一个妙用
2016/08/29 Javascript
浅谈javascript alert和confirm的美化
2016/12/15 Javascript
通过button将form表单的数据提交到action层的实例
2017/09/08 Javascript
bootstrap时间控件daterangepicker使用方法及各种小bug修复
2017/10/25 Javascript
Javascript的console['']常用输入方法汇总
2018/04/26 Javascript
在Vue中使用this.$store或者是$route一直报错的解决
2019/11/08 Javascript
python list语法学习(带例子)
2013/11/01 Python
编程语言Python的发展史
2014/09/26 Python
python创建临时文件夹的方法
2015/07/06 Python
python 日期操作类代码
2018/05/05 Python
Python 实现遥感影像波段组合的示例代码
2019/08/04 Python
django基础学习之send_mail功能
2019/08/07 Python
pytorch 自定义卷积核进行卷积操作方式
2019/12/30 Python
python3.5的包存放的具体路径
2020/08/16 Python
CSS3 实现穿梭星空动画
2020/11/13 HTML / CSS
EJB发布WEB服务一般步骤
2012/10/31 面试题
Laravel的加密解密与哈希实例讲解
2021/03/24 PHP
致铅球运动员广播稿精选
2014/01/12 职场文书
高中生的自我鉴定范文
2014/01/24 职场文书
企业挂职心得体会
2014/09/10 职场文书
运动会广播稿诗歌版
2014/09/12 职场文书
护士实习自荐信
2015/03/06 职场文书
田径运动会通讯稿
2015/07/18 职场文书
使用Spring处理x-www-form-urlencoded方式
2021/11/02 Java/Android