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

news/2024/5/7 22:15:23

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

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

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

3,Element.clientWidth 属性表示元素的内部宽度,以像素计。该属性包括内边距,但不包括垂直滚动条(如果有)、边框和外边距。该属性值会被四舍五入为一个整数。如果你需要一个小数值,可使用 element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。")。
clientWidth

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


http://www.niftyadmin.cn/n/543257.html

相关文章

android使用Charles抓包https请求

转自:https://blog.csdn.net/honjane/article/details/54602926 android使用Charles抓包https请求1.下载Charles 4.0.22.配置3.手机安装证书,听说过Charles一直没用过,只从换了mac,fiddler就没发用了,只能研究下Charle…

2018——记录自己的成长之路

海底一小鱼 土木工程转到IT行业,2年了感觉自己没有那么努力,自己Java基础知识也不是很扎实,不想这样混下去,记录一下,到2019年看看自己到底成长了多少。 把自己学习的知识 系统的整理下,不断更新中。。。 一…

用charles拦截android设备https,证书无效的解决方法

转自:https://blog.csdn.net/kimicsdn/article/details/57089514 阅读本文前您需要了解 1.使用charles拦截https数据包,及其拦截的原理是替换ssl证书。 2.为android设备设置请求代理 正文: APP使用操作系统api发https请求时对证书的验证一般是通过操…

java.lang.UnsupportedOperationException异常处理

这个异常遇到了才知道坑这么大&#xff0c;坑爹的方法。 private String[] otherUserFromArray new String[]{“3”&#xff0c; “4”&#xff0c; “发放”}; List<String> userFromList Arrays.asList(otherUserFromArray); 在使用 Arrays.asList&#xff08;&…

软工网络15个人作业2

16章 创新 问题一 “创新的迷思&#xff1a;最近几年&#xff0c;我们整个社会似乎对创新都很感兴趣&#xff0c;媒体上充斥着各种创新类的人才&#xff0c;创新型的学校&#xff0c;创新型的公司&#xff0c;城市&#xff0c;社会等名词” 通过阅读这些&#xff0c;“创新”…

竞价广告系统-流量预测

流量预测 在前面合约式广告中提到过合约式广告中有三个基本技术&#xff0c;1. 受众定向&#xff0c;2. 点击预测&#xff0c;3. 流量预测。在这三个技术基础上才可以做Online Allocation&#xff0c;本节主要介绍流量预测。 在定向条件分的比较粗的情况下&#xff0c;流量预测…

十分钟理解Gradle

一、什么是Gradle 简单的说&#xff0c;Gradle是一个构建工具&#xff0c;它是用来帮助我们构建app的&#xff0c;构建包括编译、打包等过程。我们可以为Gradle指定构建规则&#xff0c;然后它就会根据我们的“命令”自动为我们构建app。Android Studio中默认就使用Gradle来完…

eclipse debug configurations arguments指定文件路径参数

1 eclipse debug configurations arguments指定文件路径参数 使用绝对路径&#xff0c;但是这个文件必须要放在该project的源码路径的外面才行&#xff0c;否则eclipse不认这个文件。 比如project的路径是/Users/xxxx/myworks/helloworld_project &#xff0c;那么作为参数的文…