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调用XML制作连动下拉列表框
Jun 25 Javascript
Dom 是什么的详细说明
Oct 25 Javascript
Seajs的学习笔记
Mar 04 Javascript
JavaScript中实现sprintf、printf函数
Jan 27 Javascript
简单学习JavaScript中的for语句循环结构
Nov 10 Javascript
jQuery基于正则表达式的表单验证功能示例
Jan 21 Javascript
小程序实现搜索界面 小程序实现推荐搜索列表效果
May 18 Javascript
vue项目中运用webpack动态配置打包多种环境域名的方法
Jun 24 Javascript
vue-socket.io跨域问题有效解决方法
Feb 11 Javascript
react 生命周期实例分析
May 18 Javascript
如何HttpServletRequest文件对象并储存
Aug 14 Javascript
详解Vite的新体验
Feb 22 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 模板高级篇总结
2006/12/21 PHP
php array_push()数组函数:将一个或多个单元压入数组的末尾(入栈)
2011/07/12 PHP
php ctype函数中文翻译和示例
2014/03/21 PHP
PHP 前加at符合@的作用解析
2015/07/31 PHP
Thinkphp自定义代码生成工具及用法说明(附下载地址)
2016/05/27 PHP
php如何实现不借助IDE快速定位行数或者方法定义的文件和位置
2017/01/17 PHP
javascript的事件描述
2006/09/08 Javascript
javascript 打开页面window.location和window.open的区别
2010/03/17 Javascript
如何让div span等元素能响应键盘事件操作指南
2012/11/13 Javascript
基于jquery实现拆分姓名的方法(纯JS版)
2013/05/08 Javascript
js实现仿爱微网两级导航菜单效果代码
2015/08/31 Javascript
CSS中position属性之fixed实现div居中
2015/12/14 Javascript
最实用的jQuery分页插件
2016/10/09 Javascript
js实现弹窗暗层效果
2017/01/16 Javascript
JavaScript事件方法(实例讲解)
2017/06/27 Javascript
node-sass安装失败的原因与解决方法
2017/09/04 Javascript
在小程序开发中使用npm的方法
2018/10/17 Javascript
javascript的hashCode函数实现代码小结
2020/08/11 Javascript
使用Python的Twisted框架编写简单的网络客户端
2015/04/16 Python
Python下载懒人图库JavaScript特效
2015/05/28 Python
python爬虫获取多页天涯帖子
2018/02/23 Python
python异常处理try except过程解析
2020/02/03 Python
python自动点赞功能的实现思路
2020/02/26 Python
自定义Django默认的sitemap站点地图样式
2020/03/04 Python
python matplotlib:plt.scatter() 大小和颜色参数详解
2020/04/14 Python
python中使用input()函数获取用户输入值方式
2020/05/03 Python
解决Keras中CNN输入维度报错问题
2020/06/29 Python
分享30个新鲜的CSS3打造的精美绚丽效果(附演示下载)
2012/12/28 HTML / CSS
HTML5几个设计和修改的页面范例分享
2015/09/29 HTML / CSS
2014年大学生预备党员思想汇报1000字
2014/09/13 职场文书
不服从公司安排检讨书
2014/09/24 职场文书
2015年惩防体系建设工作总结
2015/05/22 职场文书
大国崛起英国观后感
2015/06/02 职场文书
2016年党员读书月活动总结
2016/04/06 职场文书
《时代广场的蟋蟀》读后感:真挚友情,温暖世界!
2020/01/08 职场文书
linux目录管理方法介绍
2022/06/01 Servers