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去掉字符串里的所有空格
Feb 08 Javascript
汉化英文版的Dreamweaver CS5并自动提示jquery
Nov 25 Javascript
浅析JavaScript事件和方法
Feb 28 Javascript
javascript删除元素节点removeChild()用法实例
May 26 Javascript
针对BootStrap中tabs控件的美化和完善(推荐)
Jul 06 Javascript
用jquery快速解决IE输入框不能输入的问题
Oct 04 Javascript
为什么我们要做三份 Webpack 配置文件
Sep 18 Javascript
详解vue使用vue-layer-mobile组件实现toast,loading效果
Aug 31 Javascript
使用iView Upload 组件实现手动上传图片的示例代码
Oct 01 Javascript
vue-router之实现导航切换过渡动画效果
Oct 31 Javascript
jQuery实现手风琴效果(蒙版)
Jan 11 jQuery
JavaScript实现原型封装轮播图
Dec 27 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完全过滤HTML,JS,CSS等标签
2009/01/16 PHP
php实现memcache缓存示例讲解
2013/12/04 PHP
关于Laravel Route重定向的一个注意点
2017/01/16 PHP
Laravel框架Eloquent ORM修改数据操作示例
2019/12/03 PHP
两种简单实现菜单高亮显示的JS类代码
2010/06/27 Javascript
Javascript实现动态菜单添加的实例代码
2013/07/05 Javascript
js中直接声明一个对象的方法
2014/08/10 Javascript
谈一谈jQuery核心架构设计
2016/03/28 Javascript
更靠谱的H5横竖屏检测方法(js代码)
2016/09/13 Javascript
微信小程序 rpx 尺寸单位详细介绍
2016/10/13 Javascript
Jquery Easyui验证组件ValidateBox使用详解(20)
2016/12/18 Javascript
详解Nodejs mongoose
2018/06/10 NodeJs
vue router 组件的高级应用实例代码
2019/04/08 Javascript
JS实现的检验身份证格式并输出出生日期,年龄,性别,出生地示例
2019/05/17 Javascript
ES6 Object方法扩展的应用实例分析
2019/06/25 Javascript
基于 vue-skeleton-webpack-plugin 的骨架屏实战
2019/08/05 Javascript
JavaScript碰撞检测原理及其实现代码
2020/03/12 Javascript
vue实现tab栏点击高亮效果
2020/08/19 Javascript
[47:45]DOTA2-DPC中国联赛 正赛 Phoenix vs Dragon BO3 第一场 2月26日
2021/03/11 DOTA
Python多线程编程简单介绍
2015/04/13 Python
Python实现二叉树结构与进行二叉树遍历的方法详解
2016/05/24 Python
python 高效去重复 支持GB级别大文件的示例代码
2018/11/08 Python
python实现发送邮件
2021/03/02 Python
html5 初试 indexedDB(推荐)
2016/07/21 HTML / CSS
澳大利亚领先的睡衣品牌:Peter Alexander
2016/08/16 全球购物
贝斯特韦斯特酒店集团官网:Best Western
2019/01/03 全球购物
华为消费者德国官方网站:HUAWEI德国
2020/11/03 全球购物
Ref与out有什么不同
2012/11/24 面试题
介绍一下linux的文件权限
2014/07/20 面试题
short s1 = 1; s1 = s1 + 1;有什么错? short s1 = 1; s1 += 1;有什么错?
2014/09/26 面试题
学生会干部自荐信
2014/02/04 职场文书
授权委托书
2014/09/17 职场文书
公司离职证明标准样本
2014/10/05 职场文书
中学生自我评价范文
2015/03/03 职场文书
2015年全国爱眼日活动方案
2015/05/05 职场文书
GoFrame基于性能测试得知grpool使用场景
2022/06/21 Golang