(学问)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()要领返回元素的大小及其相对于视口的位置。”)。
《(学问)width、naturalWidth、clientWidth、offsetWidth区分整顿》

4,HTMLElement.offsetWidth 是一个只读属性,返回一个元素的规划宽度。一个典范的(译者注:各浏览器的offsetWidth能够有所不同)offsetWidth是丈量包括元素的边框(border)、水平线上的内边距(padding)、竖直方向滚动条(scrollbar)(假如存在的话)、以及CSS设置的宽度(width)的值。
《(学问)width、naturalWidth、clientWidth、offsetWidth区分整顿》

    原文作者:正月初五
    原文地址: https://segmentfault.com/a/1190000013772038
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞