基于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 相关文章推荐
prototype 源码中文说明之 prototype.js
Sep 22 Javascript
将Datatable转化成json发送前台实现思路
Sep 06 Javascript
javascript的渐进增强与平稳退化浅谈
Nov 12 Javascript
JavaScript严格模式禁用With语句的原因
Oct 20 Javascript
Node.js事件循环(Event Loop)和线程池详解
Jan 28 Javascript
javascript实现tab切换的四种方法
Nov 05 Javascript
jQuery 1.9.1源码分析系列(十五)动画处理之缓动动画核心Tween
Dec 03 Javascript
JavaScript获取短信验证码(周期性)
Dec 29 Javascript
ElementUI Tag组件实现多标签生成的方法示例
Jul 08 Javascript
js实现计时器秒表功能
Dec 16 Javascript
vue打开其他项目页面并传入数据详解
Nov 25 Vue.js
vue集成一个支持图片缩放拖拽的富文本编辑器
Jan 29 Vue.js
浅谈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爆绝对路径方法收集整理
2012/09/17 PHP
PHP包含文件函数include、include_once、require、require_once区别总结
2014/04/05 PHP
PHP开发框架kohana中处理ajax请求的例子
2014/07/14 PHP
php微信支付之APP支付方法
2015/03/04 PHP
PHP之密码加密的几种方式
2015/07/29 PHP
Yii2.0高级框架数据库增删改查的一些操作
2015/11/16 PHP
js面向对象的写法
2016/02/19 Javascript
Angular.js中处理页面闪烁的方法详解
2017/03/09 Javascript
动手写一个angular版本的Message组件的方法
2017/12/16 Javascript
Vue+Jwt+SpringBoot+Ldap完成登录认证的示例代码
2018/05/21 Javascript
vue+webpack 更换主题N种方案优劣分析
2019/10/28 Javascript
js实现烟花特效
2020/03/02 Javascript
解决Vue + Echarts 使用markLine标线(precision精度问题)
2020/07/20 Javascript
原生JS实现记忆翻牌游戏
2020/07/31 Javascript
Python抓取Discuz!用户名脚本代码
2013/12/30 Python
python实现颜色rgb和hex相互转换的函数
2015/03/19 Python
在Python的Bottle框架中使用微信API的示例
2015/04/23 Python
Python升级导致yum、pip报错的解决方法
2017/09/06 Python
python matlibplot绘制3D图形
2018/07/02 Python
face++与python实现人脸识别签到(考勤)功能
2019/08/28 Python
Python+Appium实现自动化清理微信僵尸好友的方法
2021/02/04 Python
微信小程序“圣诞帽”的实现思路详解
2017/12/28 HTML / CSS
Juice Beauty官网:有机美容产品,护肤与化妆品
2020/06/13 全球购物
几个Shell Script面试题
2014/04/18 面试题
北京鼎普科技股份有限公司软件测试面试题
2012/04/07 面试题
主要的Ajax框架都有什么
2013/11/14 面试题
秘书岗位职责
2013/11/18 职场文书
高三地理教学反思
2014/01/11 职场文书
四年级语文教学反思
2014/02/05 职场文书
学徒工职责
2014/03/06 职场文书
学校组织向国旗敬礼活动方案(中小学适用)
2014/09/27 职场文书
放假通知范文
2015/04/14 职场文书
2015年行政人事部工作总结
2015/05/13 职场文书
领导欢送会主持词
2015/07/06 职场文书
食堂管理制度范本
2015/08/04 职场文书
2019最新校园运动会广播稿!
2019/06/28 职场文书