width、naturalWidth、clientWidth、offsetWidth区别整理

今天在做图片裁剪功能的时候,参考了下网友的资料,发现大家对图片宽度的获取方式不尽相同,于是详细整理下各个属性的区别(详细请参考MDN)。

1,HTMLImageElement.width是一个unsigned long 类型反映了 width HTML 属性, 说明图像在CSS像素中渲染的宽度。

2,HTMLImageElement.naturalWidth返回一个 unsigned long 类型,表明图像在CSS像素中固有的宽度,如果可用的话; 否则, 返回0

3,Element.clientWidth 属性表示元素的内部宽度,以像素计。该属性包括内边距,但不包括垂直滚动条(如果有)、边框和外边距。该属性值会被四舍五入为一个整数。如果你需要一个小数值,可使用 element.getBoundingClientRect()
这里写图片描述

4,HTMLElement.offsetWidth 是一个只读属性,返回一个元素的布局宽度。一个典型的(译者注:各浏览器的offsetWidth可能有所不同)offsetWidth是测量包含元素的边框(border)、水平线上的内边距(padding)、竖直方向滚动条(scrollbar)(如果存在的话)、以及CSS设置的宽度(width)的值。
这里写图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值