资讯专栏INFORMATION COLUMN

(知识)width、naturalWidth、clientWidth、offsetWidth区别整理

csRyan / 1037人阅读

摘要:,属性表示元素的内部宽度,以像素计。该属性包括内边距,但不包括垂直滚动条如果有边框和外边距。该属性值会被四舍五入为一个整数。

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/52014.html

相关文章

  • 知识width、naturalWidth、clientWidth、offsetWidth区别整理

    摘要:,属性表示元素的内部宽度,以像素计。该属性包括内边距,但不包括垂直滚动条如果有边框和外边距。该属性值会被四舍五入为一个整数。 今天在做图片裁剪功能的时候,参考了下网友的资料,发现大家对图片宽度的获取方式不尽相同,于是详细整理下各个属性的区别(详细请参考MDN)。 1,HTMLImageElement.width是一个unsigned long 类型反映了 width HTML 属性, ...

    wenyiweb 评论0 收藏0
  • 知识width、naturalWidth、clientWidth、offsetWidth区别整理

    摘要:,属性表示元素的内部宽度,以像素计。该属性包括内边距,但不包括垂直滚动条如果有边框和外边距。该属性值会被四舍五入为一个整数。 今天在做图片裁剪功能的时候,参考了下网友的资料,发现大家对图片宽度的获取方式不尽相同,于是详细整理下各个属性的区别(详细请参考MDN)。 1,HTMLImageElement.width是一个unsigned long 类型反映了 width HTML 属性, ...

    dabai 评论0 收藏0
  • JavaScript中的各种宽高属性

    摘要:在中,存在着多的关于高度和宽度的属性,比如等等这么多,傻傻分不清也正常啊。第二问题对象的属性引用的是对象,表示该窗口中当前显示文档的。如果出现滚动条,滚动条会遮盖元素的宽高,那么该属性就是其本来宽高减去滚动条的宽高。 在js中,存在着N多的关于高度和宽度的属性,比如:clientHeight、offsetHeight、scrollHeight、availHeight、scrollLef...

    wangbinke 评论0 收藏0
  • 整理获取 viewport 和 element 尺寸和位置方法

    摘要:整理获取和尺寸和位置方法更多前端技术和知识点,搜索订阅号菌订阅视口页面或窗口的位置和宽高获取视口宽高下面方法是包括滚动条的宽高,不支持滚动条另外浏览器兼容差,可获取包括工具栏的宽高页面滚动位置返回整个页面的滚动的位置,与返回的值一致,前者是 showImg(https://segmentfault.com/img/remote/1460000018860153?w=640&h=426)...

    dinfer 评论0 收藏0
  • JS宽高(client、offset、scroll)的介绍

    摘要:问题今日头条的一道笔试题,的区别。结果如图更详细的介绍,请点击 问题 今日头条的一道笔试题,offsetWidth、clientWidth、scrollWidth的区别。 分析 JS中document对象的宽高有三种,cilent、offset、scroll client: clientWidth和clientHeight,clientTop和clientLeft clientWidt...

    mj 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<