基于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 相关文章推荐
JQuery操作表格(隔行着色,高亮显示,筛选数据)
Feb 23 Javascript
JavaScript中的prototype.bind()方法介绍
Apr 04 Javascript
JS完整获取IE浏览器信息包括类型、版本、语言等等
May 22 Javascript
js调试系列 源码定位与调试[基础篇]
Jun 18 Javascript
javascript中with()方法的语法格式及使用
Aug 04 Javascript
JQuery fileupload插件实现文件上传功能
Mar 18 Javascript
详解Vue2.0之去掉组件click事件的native修饰
Apr 20 Javascript
Vue.js tab实现选项卡切换
May 16 Javascript
使用jQuery实现简单的tab框实例
Aug 22 jQuery
浅谈vue中.vue文件解析流程
Apr 24 Javascript
详解vue中v-model和v-bind绑定数据的异同
Aug 10 Javascript
JS前端轻量fabric.js系列物体基类
Aug 05 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与MYSQL中UTF8 中文排序示例代码
2014/10/23 PHP
PHP获取一年有几周以及每周开始日期和结束日期
2015/08/06 PHP
PHP类和对象相关系统函数与运算符小结
2016/09/28 PHP
thinkphp5 URL和路由的功能详解与实例
2017/12/26 PHP
如何用js控制css中的float的代码
2007/08/16 Javascript
jquery ui dialog ie8出现滚动条的解决方法
2010/12/06 Javascript
js实现倒计时时钟的示例代码
2013/12/17 Javascript
Javascript写入txt和读取txt文件示例
2014/02/12 Javascript
跟我学习javascript的异步脚本加载
2015/11/20 Javascript
JavaScript实现自动生成网页元素功能(按钮、文本等)
2015/11/21 Javascript
JavaScript中清空数组的方法总结
2016/12/02 Javascript
VUE实现日历组件功能
2017/03/13 Javascript
vue.js与element-ui实现菜单树形结构的解决方法
2018/04/21 Javascript
layui 数据表格 点击分页按钮 监听事件的实例
2019/09/02 Javascript
使用pkg打包ThinkJS项目的方法步骤
2019/12/30 Javascript
手把手带你入门微信小程序新框架Kbone的使用
2020/02/25 Javascript
解决vue scoped scss 无效的问题
2020/09/04 Javascript
python difflib模块示例讲解
2017/09/13 Python
Django跨域请求问题的解决方法示例
2018/06/16 Python
在Pycharm terminal中字体大小设置的方法
2019/01/16 Python
解决python Markdown模块乱码的问题
2019/02/14 Python
Python二叉树的镜像转换实现方法示例
2019/03/06 Python
python利用itertools生成密码字典并多线程撞库破解rar密码
2019/08/12 Python
python中的global关键字的使用方法
2019/08/20 Python
基于Python新建用户并产生随机密码过程解析
2019/10/08 Python
基于Python实现船舶的MMSI的获取(推荐)
2019/10/21 Python
python实现用类读取文件数据并计算矩形面积
2020/01/18 Python
Python导入模块包原理及相关注意事项
2020/03/25 Python
django正续或者倒序查库实例
2020/05/19 Python
香港太阳眼镜网上商店:SmartBuyGlasses香港
2016/07/22 全球购物
校园达人秀策划书
2014/01/12 职场文书
《小小雨点》教学反思
2014/02/18 职场文书
庆国庆活动总结
2014/08/28 职场文书
信访维稳工作汇报
2014/10/27 职场文书
酒店前台岗位职责
2015/04/16 职场文书
开发微信小程序之WXSS样式教程
2022/04/18 HTML / CSS