1. style.width只能读取内联样式，offsetWidth都可以读取；

2. style.width读取的值带“px”单位，offsetWidth读取纯数值；

3. style.width获取的只是div的宽度,不包括border和padding所占的宽度, 而offsetWidth获取的宽度是width+border+padding的值(但不包括margin)

4. offsetWidth是只读的，style.width是可读可写的

style.width与offsetWidth的区别的更多相关文章

  1. 点击按钮，缩放图片（img.width、img.style.width、img.offsetWidth）

    前几天在慕课网上看到一个关于图片缩放的教学视频,因为当时对老师使用img.width,而不是使用img.style.width而感到奇怪,所以周末得空了,想来自己试着写出来,相关视频网址如下:http ...

  2. dom.style.left 与 dom.offsetLeft区别

    dom.style.left    初始空值,必须在html行内样式定义值才有值,在css样式定义仍为空值                         可读写,是字符串,读写是必须加px,否则无效 ...

  3. H5 canvas的 width、height 与style中宽高的区别

    Canvas 的width height属性 1.当使用width height属性时,显示正常不会被拉伸:如下 <canvas id="mycanvas" width=&q ...

  4. css width="100" style ="width:100px" 区别

    1. width="100"是正确的,而 width="100px"是错误的, style = "width:100px"是正确的 2. s ...

  5. js的 style.width 取不到元素的宽度值

    以前一直用jquery的.width()方法来获取一个元素的当前的宽度.不管该元素是否设置了宽度,CSS样式是内联.外联or内嵌,都可用此方式获得元素当前的宽度. 今天想用原生JS想获取一个元素宽度时 ...

  6. js的style.width取不到元素的宽度值

    使用jquery的.width()方法获取一个元素的当前宽度,不管元素是否设置了宽度,css样式时内联 外联或者是内嵌,都可以使用 这个方法获取元素的宽度. 使用原生js style.width .w ...

  7. CSS width：100%和width：auto的区别

    width:100%和width:auto的区别 width:auto比较聪明,如果margin已经左右占去10px的空间,那么width给的值就是580px. <style> div{ ...

  8. style、currentStyle、getComputedStyle区别介绍

    style.currentStyle.getComputedStyle区别介绍 来自:蓝色天空 样式表有三种方式 内嵌样式(inline Style) :是写在Tag里面的,内嵌样式只对所有的Tag有 ...

  9. style.left offsetLeft offsetwidth clientLeft clientWidth scrollLeft scrollWidth

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

随机推荐

  1. CentOS中service命令与/etc/init.d的关系以及centos7的变化

    缘由 由于个人经常在ubuntu和centos 系统中切换,习惯了以前的 ubuntu中 通过 /etc/init.d/xxx 进行软件服务控制.后来发现centos7中换了服务的控制方式:servi ...

  2. 《Mysql 数据类型》

    一:整型 - 常用类型 类型 占用(字节) 范围 无符号范围 无符号范围 TINYINT 2的8次方 - — — SMALLINT 2的15次方 - — 6553 5 INT 2的31次方 - — 4 ...

  3. 11.2-uC/OS-III添加任务到就绪队列

    1.uC/OS-III提供很多服务可以把任务添加到就绪列表中. 最明显的服务是OSTaskCreate(), 它通常创建准备运行的任务并将任务放入就绪列表中.如图6-6所示,就绪列表中该优先级中已经有 ...

  4. js 合并两个数组对象

    项目背景是合并a = [{name:'dede'},{name:'jenny'}],  b = [{age:18},{age:19}]  合并成[{name:'dede',age:18},{name: ...

  5. CSS中border和outline的区别

    border: border-width:1px; border-style:solid; border-color:#ccc; 可以简写为:border:1ox solid #ccc; outlin ...

  6. OAuth2认证和授权入门

    OAuth2四种授权方式 四种授权方式 OAuth 2.0定义了四种授权方式. 密码模式(resource owner password credentials) 授权码模式(authorizatio ...

  7. c#之如何操作excel

    可使用EPPlus类库,下载地址如下: http://epplus.codeplex.com/ 也可以在这里下载: https://files.cnblogs.com/files/jietian331 ...

  8. Docker 基础 (一)

    为什么要使用 Docker? 作为一种新兴的虚拟化方式,Docker 跟传统的虚拟化方式相比具有众多的优势.首先,Docker 容器的启动可以在秒级实现,这相比传统的虚拟机方式要快得多. 其次,Doc ...

  9. 自定义Word颜色主题

    外观 说明 看到这个黑色编辑器的界面,第一印象可能认为是Sublime.Atom. VScode或者其它markdown编辑器.其实仅仅是微软的Word经过了自定义主题. 选择清晰易于辨认的字体和深色 ...

  10. 【Spark-core学习之三】 Spark集群搭建 & spark-shell & Master HA

    环境 虚拟机:VMware 10 Linux版本:CentOS-6.5-x86_64 客户端:Xshell4 FTP:Xftp4 jdk1.8 scala-2.10.4(依赖jdk1.8) spark ...