博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jQuery中尺寸
阅读量:5901 次
发布时间:2019-06-19

本文共 2221 字,大约阅读时间需要 7 分钟。

hot3.png

jQuery 提供多个处理尺寸的重要方法:

  • width()
  • height()
  • innerWidth()
  • innerHeight()
  • outerWidth()
  • outerHeight()

width() 方法设置或返回元素的宽度(不包括内边距、边框或外边距)。

height() 方法设置或返回元素的高度(不包括内边距、边框或外边距)。

innerWidth() 方法返回元素的宽度(包括内边距)。

innerHeight() 方法返回元素的高度(包括内边距)。

outerWidth() 方法返回元素的宽度(包括内边距和边框)。

outerHeight() 方法返回元素的高度(包括内边距和边框)。

outerWidth(true) 方法返回元素的宽度(包括内边距、边框和外边距)。

outerHeight(true) 方法返回元素的高度(包括内边距、边框和外边距)。

$(document).width()  文档宽度
$(window).width()  窗口宽度

网页可见区域宽/高: document.body.clientWidth/clientHeight;

网页可见区域宽/高: document.body.offsetWidth/offsetHeight   (包括边线的宽/高);
网页正文全文宽/高: document.body.scrollWidth/scrollHeight;
网页被卷去的高: document.body.scrollTop;
网页被卷去的左: document.body.scrollLeft;
网页正文部分上: window.screenTop;
网页正文部分左: window.screenLeft;
屏幕分辨率的高/宽: window.screen.height/width;
屏幕可用工作区高度/宽度: window.screen.availHeight/availWidth;

1、offsetWidth (width+padding+border)

当前对象的宽度。

style.width也是当前对象的宽度(width+padding+border)。

区别:1)style.width返回值除了数字外还带有单位px;

           2)如对象的宽度设定值为百分比宽度,则无论页面变大还是变小,

              style.width都返回此百分比,而offsetWidth则返回在不同页面中对象的宽度值而不是百分比值;

           3)如果没有给 HTML 元素指定过 width样式,则 style.width 返回的是空字符串;

2、offsetHeight :(Height+padding+border)

当前对象的高度。

style.height也是当前对象的高度(height+padding+border)。

区别:1)style.height返回值除了数字外还带有单位px;

           2)如对象的高度设定值为百分比高度,则无论页面变高还是变矮,

              style.height都返回此百分比,而offsetHeight则返回在不同页面中对象的高度值而不是百分比值;

           3)如果没有给 HTML 元素指定过 height样式,则 style.height返回的是空字符串;

3、offsetLeft :

当前对象到其上级层左边的距离。

不能对其进行赋值.设置对象到其上级层左边的距离请用style.left属性。

style.left当前对象到其上级层左边的距离。

区别:1)style.left返回值除了数字外还带有单位px;

           2)如对象到其上级层左边的距离设定值为百分比,

              style.left返回此百分比,而offsetLeft则返回到其上级层左边的距离的值;

           3)如果没有给 HTML 元素指定过 left样式,则 style.left返回的是空字符串;

4、offsetTop :

当前对象到其上级层顶部边的距离。

不能对其进行赋值.设置对象到上级层顶部边的距离请用style.top属性。

style.top当前对象到其上级层顶部边的距离。

区别:1)style.top返回值除了数字外还带有单位px;

           2)如对象到其上级层顶部边的距离设定值为百分比,

              style.top返回此百分比,而offsetTop则返回到其上级顶部边的距离的值;

           3)如果没有给 HTML 元素指定过 top样式,则 style.top返回的是空字符串;

5、scrollWidth:获取对象的滚动宽度 。

6、scrollHeight: 获取对象的滚动高度。

7、scrollLeft:设置或获取位于对象左边界和对象中目前可见内容的最左端之间的距离(width+padding为一体)

8、scrollTop:设置或获取位于对象最顶端和对象中可见内容的最顶端之间的距离;(height+padding为一体)

9、clientWidth: 获取对象可见内容的宽度,不包括滚动条,不包括边框;

10、clientHeight: 获取对象可见内容的高度,不包括滚动条,不包括边框;

11、clientLeft: 获取对象的border宽度

12、clientTop:获取对象的border高度

13、offsetParent :当前对象的上级层对象.

转载于:https://my.oschina.net/ochmdlc/blog/838444

你可能感兴趣的文章
webpack多页应用架构系列(七):开发环境、生产环境傻傻分不清楚?
查看>>
笨办法学C 练习1:启用编译器
查看>>
树的总结--树的性质(树的深度) leetcode
查看>>
nagios短信报警(飞信fetion20080522004-linrh4)
查看>>
【Android游戏开发之六】在SurfaceView中添加组件!!!!并且相互交互数据!!!!...
查看>>
linux 将大文件分成小文件
查看>>
CCNA- 距离矢量路由协议学习
查看>>
企业实践用户邮箱导入/导出(第2部分)
查看>>
如何学习Linux命令-初级篇
查看>>
从Oracle Public Yum为Oracle Linux建立本地的Yum源
查看>>
在 SELECT 查询中使用表表达式
查看>>
静态路由和默认路由
查看>>
关于阿里开发者招聘节 |这5道笔试真题 你会吗!???
查看>>
C#的异常处理机制
查看>>
vsftp:500 OOPS: could not bind listening IPv4 sock
查看>>
Linux安装BTCPayServer并设置比特币BTC和Lightning支付网关
查看>>
Python 的 with 语句
查看>>
mysql安装,远程连接,以及修改密码
查看>>
Mybatis查询返回Map类型数据
查看>>
java的深拷贝与浅拷贝
查看>>