基于js中style.width与offsetWidth的区别(详解)


Posted in Javascript onNovember 12, 2017

作为一个初学者,经常会遇到在获取某一元素的宽度(高度、top值...)时,到底是用 style.width还是offsetWidth的疑惑。

1. 当样式写在行内的时候,如 <div id="box" style="width:100px">时,用 style.width或者offsetWidth都可以获取元素的宽度。

但是,当样式写在样式表中时,如 #box{ width: 100px; }, 此时只能用offsetWidth来获取元素的宽度,而style.width所返回的值为空。

2. style.width 获取的元素宽度只是div的宽度,不包括border、和padding所占的宽度,且宽度值是带单位px的。

offsetWidth 获取的元素宽度为width+border+padding的值(不包括margin),且返回值只为一个数值,不带单位。

如下面的例子所示:

<head>
    <script>
      window.onload = function(){
        var box = document.getElementById('box');
        console.log(box.style.width); 
        console.log(box.offsetWidth); 
       }
</script>
  </head>
  <body>
    <div id="box" style="width:300px; height: 300px; padding:3px; margin: 1px; border: 1px solid red;"></div>
  </body>

控制台输出的第一个结果为:  300px

控制台输出的第二个结果为:  308      注:300+ 3x2 +1x2 = 308, 且不带单位

3. style.width 也可以在js中用来设置元素的宽度,而offsetWidth不可以。

如下面的例子所示:

<script>
      window.onload = function(){
        var box = document.getElementById('box');
        box.style.width = '200px';
        console.log(box.offsetWidth);
        console.log(box.style.width);
        box.offsetWidth = '400px';
        console.log(box.offsetWidth);
        console.log(box.style.width);
      }
    </script>
  </head>
  <body>
    <div id="box" style="width:300px; height: 300px; padding:3px; margin: 2px; border: 1px solid red;"></div>
  </body>

控制台输出的结果分别为 208     200px     208      200px

也就是说通过style.width 设置宽度成功,而 通过offsetWidth设置宽度失败。

以上这篇基于js中style.width与offsetWidth的区别(详解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 字符串连接性能优化
Dec 20 Javascript
javascript中负数算术右移、逻辑右移的奥秘探索
Oct 17 Javascript
Jquery.Form 异步提交表单的简单实例
Mar 03 Javascript
解决node-webkit 不支持html5播放mp4视频的方法
Mar 11 Javascript
js完美实现@提到好友特效(兼容各大浏览器)
Mar 16 Javascript
JavaScript通过select动态更换图片的方法
Mar 23 Javascript
基于BootStrap的图片轮播效果展示实例代码
May 23 Javascript
thinkphp标签实现bootsrtap轮播carousel实例代码
Feb 19 Javascript
vue子组件使用自定义事件向父组件传递数据
May 27 Javascript
JavaScript字符串检索字符的方法
Jun 23 Javascript
深入理解angular2启动项目步骤
Jul 15 Javascript
详解利用 Express 托管静态文件的方法
Sep 18 Javascript
浅谈webpack下的AOP式无侵入注入
Nov 12 #Javascript
JQ图片文件上传之前预览功能的简单实例(分享)
Nov 12 #Javascript
JS实现小球的弹性碰撞效果
Nov 11 #Javascript
jQuery实现checkbox即点即改批量删除及中间遇到的坑
Nov 11 #jQuery
解决vue组件中使用v-for出现告警问题及v for指令介绍
Nov 11 #Javascript
JS Input里添加小图标的两种方法
Nov 11 #Javascript
fetch 使用及如何接收JS传值
Nov 11 #Javascript
You might like
php 破解防盗链图片函数
2008/12/09 PHP
zen cart新进商品的随机排序修改方法
2010/09/10 PHP
通过PHP简单实例介绍文件上传
2015/12/16 PHP
php微信公众号js-sdk开发应用
2016/11/28 PHP
PHP校验15位和18位身份证号的类封装
2018/11/07 PHP
PHP count()函数讲解
2019/02/03 PHP
PHP大文件切割上传功能实例分析
2019/07/01 PHP
javascript 动态生成私有变量访问器
2009/12/06 Javascript
jquery多行滚动/向左或向上滚动/响应鼠标实现思路及代码
2013/01/23 Javascript
jQuery插件Tooltipster实现漂亮的工具提示
2015/04/12 Javascript
原生js和jquery实现图片轮播淡入淡出效果
2015/04/23 Javascript
实例详解ECMAScript5中新增的Array方法
2016/04/05 Javascript
你不需要jQuery(三) 新AJAX方法fetch()
2016/06/14 Javascript
jQuery实现获取元素索引值index的方法
2016/09/18 Javascript
KVM虚拟化技术之使用Qemu-kvm创建和管理虚拟机的方法
2016/10/05 Javascript
值得分享的JavaScript实现图片轮播组件
2016/11/21 Javascript
微信小程序 图片绝对定位(背景图片)
2017/04/05 Javascript
vue router使用query和params传参的使用和区别
2017/11/13 Javascript
利用vue+elementUI实现部分引入组件的方法详解
2017/11/22 Javascript
为什么说JavaScript预解释是一种毫无节操的机制详析
2018/11/18 Javascript
JS散列表碰撞处理、开链法、HashTable散列示例
2019/02/08 Javascript
swiper自定义分页器的样式
2020/09/14 Javascript
简单谈谈Python中函数的可变参数
2016/09/02 Python
Python编程实战之Oracle数据库操作示例
2017/06/21 Python
Python中shapefile转换geojson的示例
2019/01/03 Python
解决pyqt5中QToolButton无法使用的问题
2019/06/21 Python
解决Python内层for循环如何break出外层的循环的问题
2019/06/24 Python
django 信号调度机制详解
2019/07/19 Python
python文字和unicode/ascll相互转换函数及简单加密解密实现代码
2019/08/12 Python
解决python中的幂函数、指数函数问题
2019/11/25 Python
python实现移动木板小游戏
2020/10/09 Python
使用Python将xmind脑图转成excel用例的实现代码(一)
2020/10/12 Python
信息技术专业大学生个人的自我评价
2013/10/05 职场文书
小学生纪念九一八事变演讲稿
2014/09/14 职场文书
庆七一宣传标语
2014/10/08 职场文书
2015年宣传部个人工作总结
2015/05/14 职场文书