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 全等号运算符使用说明
May 31 Javascript
js onload处理html页面加载之后的事件
Oct 30 Javascript
javascript屏蔽右键代码
May 15 Javascript
javascript数组排序汇总
Jul 07 Javascript
jquery插件之文字间歇自动向上滚动效果代码
Feb 25 Javascript
100行代码理解和分析vue2.0响应式架构
Mar 09 Javascript
Vue.js中组件中的slot实例详解
Jul 17 Javascript
深入理解vuex2.0 之 modules
Nov 20 Javascript
基于axios封装fetch方法及调用实例
Feb 05 Javascript
关于在vue 中使用百度ueEditor编辑器的方法实例代码
Sep 14 Javascript
简单了解TypeScript中如何继承 Error 类
Jun 21 Javascript
微信小程序实现下拉加载更多商品
Dec 29 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
PHP4实际应用经验篇(2)
2006/10/09 PHP
PHP如何编写易读的代码
2007/07/10 PHP
wiki-shan写的php在线加密的解密程序
2008/09/07 PHP
php email邮箱正则
2008/10/08 PHP
一个比较简单的PHP 分页分组类
2009/12/10 PHP
PHP操作mysql函数详解,mysql和php交互函数
2011/05/19 PHP
php获取数组元素中头一个数组元素值的实现方法
2014/12/20 PHP
浅谈mysql_query()函数的返回值问题
2016/09/05 PHP
比较全面的event对像在IE与FF中的区别 推荐
2009/09/21 Javascript
JavaScript Cookie的读取和写入函数
2009/12/08 Javascript
关于JQuery($.load)事件的用法和分析
2013/04/09 Javascript
关于JS管理作用域的问题
2013/04/10 Javascript
jQuery实现的在线答题功能
2015/04/12 Javascript
js实现刷新iframe的方法汇总
2015/04/27 Javascript
jQuery网页右侧广告跟随滚动代码分享
2020/04/20 Javascript
浅谈在js传递参数中含加号(+)的处理方式
2016/10/11 Javascript
JavaScript设计模式之职责链模式应用示例
2018/08/07 Javascript
jQuery滑动效果实现方法分析
2018/09/05 jQuery
Vue 全家桶实现移动端酷狗音乐功能
2018/11/16 Javascript
JS sort方法基于数组对象属性值排序
2020/07/10 Javascript
Python2.7下安装Scrapy框架步骤教程
2017/12/22 Python
django反向解析和正向解析的方式
2018/06/05 Python
给我一面国旗 python帮你实现
2019/09/30 Python
python对象销毁实例(垃圾回收)
2020/01/16 Python
德国大型箱包和皮具商店:Koffer
2019/10/01 全球购物
一家外企的面试题目(C/C++面试题,C语言面试题)
2014/03/24 面试题
大一期末自我鉴定
2013/12/13 职场文书
网络信息管理员岗位职责
2014/01/05 职场文书
初婚未育未抱养证明
2014/01/12 职场文书
给实习单位的感谢信
2014/02/01 职场文书
幼儿园毕业园长感言
2014/02/24 职场文书
大学学生个人总结
2015/02/15 职场文书
小区环境卫生倡议书
2015/04/29 职场文书
美丽人生观后感
2015/06/03 职场文书
2016年世界人口日宣传活动总结
2016/04/05 职场文书
Python中with上下文管理协议的作用及用法
2022/03/18 Python