JS通过offsetWidth和width获取div宽度的区别

注：本次测试只用了width做了测试，height也是一样的

1、CSS使用的是内部样式和外部样式

我是测试

#ceshi {
  width: 200px;
  height: 200px;
}

// 获取数值
console.dir(document.getElementById('ceshi').style.width) // 没有值的输出 
console.dir(document.getElementById('ceshi').offsetWidth) // 200
// 赋值操作
document.getElementById('ceshi').offsetWidth = '300px' // 报错
document.getElementById('ceshi').style.width = '300px' // 赋值成功，宽度已经从200变成了300

2、CSS使用的是行内样式

我是测试

#ceshi {
  height: 200px;
}

// 获取数值
console.dir(document.getElementById('ceshi').style.width) // 200px
console.dir(document.getElementById('ceshi').offsetWidth) // 200
// 赋值操作
document.getElementById('ceshi').offsetWidth = '300px' // 报错
document.getElementById('ceshi').style.width = '300px' // 赋值成功，宽度已经从200变成了300

3、比较

offsetWidth：

（1）无论css是何种方式加载，都是可以获取数据【永远都可以获取数据】

（2）获取的值没有 'px'单位，只是一个单纯的数字

（3）无论是何种方式，都不可以通过offsetWidth对标签进行赋值【永远都不能赋值】

style.width：

（1）只能通过行内样式进行获取

（2）获取的值带有 'px' 单位

（3）无论是何种方式，都通过style.width对标签进行赋值

【就是就算style.width并能获取到数据，也可以执行赋值操作】