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 相关文章推荐
js可突破windows弹退效果代码
Aug 09 Javascript
JavaScript的eval JSON object问题
Nov 15 Javascript
仿微博字符限制效果实现代码
Apr 20 Javascript
JavaScript 事件绑定及深入
Apr 13 Javascript
jquery获取多个checkbox的值异步提交给php
Jul 07 Javascript
JS实现样式清新的横排下拉菜单效果
Oct 09 Javascript
JavaScript中的原型prototype完全解析
May 10 Javascript
基于jQuery实现Accordion手风琴自定义插件
Oct 13 Javascript
浅谈react性能优化的方法
Sep 05 Javascript
基于Vue实现可以拖拽的树形表格实例详解
Oct 18 Javascript
Vue基础学习之项目整合及优化
Jun 02 Javascript
vuex中遇到的坑,vuex数据改变,组件中页面不渲染操作
Nov 16 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
支持数组的ADDSLASHES的php函数
2010/02/16 PHP
php快速url重写 更新版[需php 5.30以上]
2010/04/20 PHP
php数组删除元素示例
2014/03/21 PHP
分享最受欢迎的5款PHP框架
2014/11/27 PHP
php+mysqli实现批量替换数据库表前缀的方法
2014/12/29 PHP
php支付宝系列之电脑网站支付
2018/05/30 PHP
php 使用 __call实现重载功能示例
2019/11/18 PHP
聊聊 PHP 8 新特性 Attributes
2020/08/19 PHP
不同浏览器对回车提交表单的处理办法
2010/02/13 Javascript
js拖动div 当鼠标移动时整个div也相应的移动
2013/11/21 Javascript
5种处理js跨域问题方法汇总
2014/12/04 Javascript
浅谈jQuery中height与width
2015/07/06 Javascript
三个js循环的关键字示例(for与while)
2016/02/16 Javascript
Bootstrap每天必学之折叠
2016/04/12 Javascript
基于jQuery和CSS3实现APPLE TV海报视差效果
2017/06/16 jQuery
通过V8源码看一个关于JS数组排序的诡异问题
2017/08/14 Javascript
利用SpringMVC过滤器解决vue跨域请求的问题
2018/02/10 Javascript
vue axios数据请求及vue中使用axios的方法
2018/09/10 Javascript
bootstrap下拉分页样式 带跳转页码
2018/12/29 Javascript
微信小程序新手教程之启动页的重要性
2019/03/03 Javascript
如何使用Node.js爬取任意网页资源并输出PDF文件到本地
2019/06/17 Javascript
[01:28:24]NAVI vs VG Supermajor 败者组 BO3 第三场 6.5
2018/06/06 DOTA
Python http接口自动化测试框架实现方法示例
2018/12/06 Python
详解python 破解网站反爬虫的两种简单方法
2020/02/09 Python
Python中读取文件名中的数字的实例详解
2020/12/25 Python
美国内衣第一品牌:Hanes(恒适)
2016/07/29 全球购物
State Cashmere官网:半零售价可持续蒙古羊绒
2020/02/26 全球购物
安全生产投入制度
2014/01/29 职场文书
海飞丝的广告词
2014/03/20 职场文书
党的群众路线教育实践活动动员会主持词
2014/03/20 职场文书
总经理任命书范本
2014/06/05 职场文书
购房公证委托书(2014版)
2014/09/12 职场文书
招标授权委托书样本
2014/09/23 职场文书
2014年初中班主任工作总结
2014/11/08 职场文书
办公室文员岗位职责
2015/02/04 职场文书
银行安全保卫工作总结
2015/08/10 职场文书