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 Calendar日历控件 兼容IE9/谷歌/火狐
Jan 04 Javascript
JQuery的AJAX实现文件下载的小例子
May 15 Javascript
jquery text(),val(),html()方法区别总结
Nov 04 Javascript
jQuery的图片滑块焦点图插件整理推荐
Dec 07 Javascript
Javascript基础教程之关键字和保留字汇总
Jan 18 Javascript
JS创建事件的三种方法(实例代码)
May 12 Javascript
webpack4 处理CSS的方法示例
Sep 03 Javascript
Vue高版本中一些新特性的使用详解
Sep 25 Javascript
详解vscode中vue代码颜色插件
Oct 11 Javascript
详解vue几种主动刷新的方法总结
Feb 19 Javascript
ES6知识点整理之模块化的应用详解
Apr 15 Javascript
JS制作简易计算器的实例代码
Jul 04 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 字符串正则替换函数preg_replace使用说明
2011/07/15 PHP
简要剖析PHP的Yii框架的组件化机制的基本知识
2016/03/17 PHP
Linux平台PHP5.4设置FPM线程数量的方法
2016/11/09 PHP
PHP页面静态化――纯静态与伪静态用法详解
2020/06/05 PHP
JavaScript Event学习第四章 传统的事件注册模型
2010/02/07 Javascript
javascrip关于继承的小例子
2013/05/10 Javascript
JSuggest自动匹配下拉框使用方法(示例代码)
2013/12/27 Javascript
js添加select下默认的option的value和text的方法
2014/10/19 Javascript
jQuery实现简易的天天爱消除小游戏
2015/10/16 Javascript
Bootstrap中CSS的使用方法
2016/02/17 Javascript
动态更新highcharts数据的实现方法
2016/05/28 Javascript
Vuex之理解Mutations的用法实例
2017/04/19 Javascript
mongoose更新对象的两种方法示例比较
2017/12/19 Javascript
原生JS实现循环Nodelist Dom列表的4种方式示例
2018/02/11 Javascript
微信小程序 Animation实现图片旋转动画示例
2018/08/22 Javascript
Python装饰器decorator用法实例
2014/11/10 Python
对于Python的Django框架使用的一些实用建议
2015/04/03 Python
python opencv之SIFT算法示例
2018/02/24 Python
Python cookbook(数据结构与算法)对切片命名清除索引的方法
2018/03/13 Python
python3结合openpyxl库实现excel操作的实例代码
2018/09/11 Python
Python+opencv 实现图片文字的分割的方法示例
2019/07/04 Python
python urllib爬虫模块使用解析
2019/09/05 Python
Python实现子类调用父类的初始化实例
2020/03/12 Python
Tensorflow卷积实现原理+手写python代码实现卷积教程
2020/05/22 Python
Python调用SMTP服务自动发送Email的实现步骤
2021/02/07 Python
HTML5新增的标签和属性归纳总结
2018/05/02 HTML / CSS
大学军训感想
2014/02/12 职场文书
物理力学求职信
2014/02/18 职场文书
2014教育局对照检查材料思想汇报
2014/09/23 职场文书
第二批党的群众路线教育实践活动总结报告
2014/10/30 职场文书
2014年生产部工作总结
2014/12/17 职场文书
检讨书范文1000字
2015/01/28 职场文书
2015年护士工作总结范文
2015/03/31 职场文书
校园歌手大赛主持词
2015/07/03 职场文书
Python 解决空列表.append() 输出为None的问题
2021/05/23 Python
mysql函数之截取字符串的实现
2022/08/14 MySQL