基于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 相关文章推荐
短信提示使用 特效
Jan 19 Javascript
Javascript的数组与字典用法与遍历对象的属性技巧
Nov 07 Javascript
js判断屏幕分辨率的代码
Jul 16 Javascript
angularJS中$apply()方法详解
Jan 07 Javascript
jQuery表单验证简单示例
Oct 17 Javascript
bootstrap中使用google prettify让代码高亮的方法
Oct 21 Javascript
获取本机IP地址的实例(JavaScript / Node.js)
Nov 24 Javascript
JavaScript实现职责链模式概述
Jan 25 Javascript
关于Vue组件库开发详析
Jul 01 Javascript
详解ES6 Symbol 的用途
Oct 14 Javascript
vue 指令之气泡提示效果的实现代码
Oct 18 Javascript
详解在vue-test-utils中mock全局对象
Nov 07 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
做一个有下拉功能的留言版
2006/10/09 PHP
一步一步学习PHP(5) 类和对象
2010/02/16 PHP
php中通过curl smtp发送邮件
2012/06/05 PHP
排序算法之PHP版快速排序、冒泡排序
2014/04/09 PHP
PDO操作MySQL的基础教程(推荐)
2017/08/18 PHP
PHP实现打包下载文件的方法示例
2017/10/07 PHP
javaScript(JS)替换节点实现思路介绍
2013/04/17 Javascript
浅析document.createDocumentFragment()与js效率
2013/07/08 Javascript
详解jQuery插件开发中的extend方法
2013/11/19 Javascript
js中typeof的用法汇总
2013/12/12 Javascript
Jquery左右滑动插件之实现超级炫酷动画效果附源码下载
2015/12/02 Javascript
jquery datatable服务端分页
2016/08/31 Javascript
bootstrap栅格系统示例代码分享
2017/05/22 Javascript
Vue学习笔记进阶篇之函数化组件解析
2017/07/21 Javascript
浅谈pc端rem字体设置的问题
2017/08/03 Javascript
Node.js+jade+mongodb+mongoose实现爬虫分离入库与生成静态文件的方法
2017/09/20 Javascript
Vue使用json-server进行后端数据模拟功能
2018/04/17 Javascript
JavaScript中变量提升与函数提升经典实例分析
2018/07/26 Javascript
浅谈关于iview表单验证的问题
2018/09/29 Javascript
详解使用element-ui table组件的筛选功能的一个小坑
2018/11/02 Javascript
详解template标签用法(含vue中的用法总结)
2021/01/12 Vue.js
[01:31:22]Ti4 循环赛第四日附加赛LGD vs Mouz
2014/07/13 DOTA
Python中模块pymysql查询结果后如何获取字段列表
2017/06/05 Python
Python+树莓派+YOLO打造一款人工智能照相机
2018/01/02 Python
python基于ID3思想的决策树
2018/01/03 Python
如何优雅地改进Django中的模板碎片缓存详解
2018/07/04 Python
pycharm 配置svn的图文教程(手把手教你)
2021/01/15 Python
Java TransactionAPI (JTA) 主要包含几部分
2012/12/07 面试题
薪酬专员岗位职责
2014/02/18 职场文书
借款担保书范文
2014/05/13 职场文书
党员承诺书格式
2014/05/21 职场文书
党员违纪检讨书
2015/05/05 职场文书
教育读书笔记
2015/07/02 职场文书
2016年社区植树节活动总结
2016/03/16 职场文书
java如何实现socket连接方法封装
2021/09/25 Java/Android
Python使用Beautiful Soup(BS4)库解析HTML和XML
2022/06/05 Python