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 相关文章推荐
firefox中用javascript实现鼠标位置的定位
Jun 17 Javascript
浏览器页面区域大小的js获取方法
Sep 21 Javascript
node.js中的定时器nextTick()和setImmediate()区别分析
Nov 26 Javascript
使用AngularJS中的SCE来防止XSS攻击的方法
Jun 18 Javascript
跟我学习javascript的执行上下文
Nov 18 Javascript
jquery跟随屏幕滚动效果的实现代码
Apr 13 Javascript
JS模拟实现方法重载示例
Aug 03 Javascript
Node.js中process模块常用的属性和方法
Dec 13 Javascript
手把手搭建安装基于windows的Vue.js运行环境
Jun 12 Javascript
vue checkbox 全选 数据的绑定及获取和计算方法
Feb 09 Javascript
详解使用vue-cli脚手架初始化Vue项目下的项目结构
Mar 08 Javascript
vue element upload组件 file-list的动态绑定实现
Oct 11 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中文件下载功能实现超详细流程分析
2012/06/13 PHP
使用Curl进行抓取远程内容时url中文编码问题示例探讨
2013/10/29 PHP
php获取网页上所有链接的方法
2015/04/03 PHP
ThinkPHP5+Layui实现图片上传加预览功能
2018/08/17 PHP
JavaScript Date对象使用总结
2009/05/14 Javascript
javascript中&quot;/&quot;运算符常见错误
2010/10/13 Javascript
javascript textContent与innerText的异同分析
2010/10/22 Javascript
javascript如何创建表格(javascript绘制表格的二种方法)
2013/12/10 Javascript
jquery数组之存放checkbox全选值示例代码
2013/12/20 Javascript
javascript如何实现暂停功能
2015/11/06 Javascript
jquery——九宫格大转盘抽奖实例
2017/01/16 Javascript
浅谈原生JS实现jQuery的animate()动画示例
2017/03/08 Javascript
详解如何在NodeJS项目中优雅的使用ES6
2017/04/22 NodeJs
如何使用angularJs
2017/05/08 Javascript
vue2.0 子组件改变props值,并向父组件传值的方法
2018/03/01 Javascript
Vuex 模块化使用详解
2019/07/31 Javascript
Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除)
2020/03/23 Javascript
浅谈vue权限管理实现及流程
2020/04/23 Javascript
jQuery实现鼠标拖动图片功能
2021/03/04 jQuery
[01:58]2018DOTA2亚洲邀请赛趣味视频——交流
2018/04/03 DOTA
Python中设置变量作为默认值时容易遇到的错误
2015/04/03 Python
Python使用文件锁实现进程间同步功能【基于fcntl模块】
2017/10/16 Python
python读取中文txt文本的方法
2018/04/12 Python
python3+django2开发一个简单的人员管理系统过程详解
2019/07/23 Python
关于torch.optim的灵活使用详解(包括重写SGD,加上L1正则)
2020/02/20 Python
django rest framework 过滤时间操作
2020/07/12 Python
Html5 Geolocation获取地理位置信息实例
2016/12/09 HTML / CSS
UNDONE手表官网:世界领先的定制手表品牌
2018/11/13 全球购物
学校消防安全制度
2014/01/30 职场文书
消防安全管理制度
2014/02/01 职场文书
初三新学期计划书
2014/05/03 职场文书
政府法律服务方案
2014/06/14 职场文书
2014年小学体育工作总结
2014/12/11 职场文书
导游词之泰山玉皇顶
2019/12/23 职场文书
php+laravel 扫码二维码签到功能
2021/05/15 PHP
MySQL串行化隔离级别(间隙锁实现)
2022/06/16 MySQL