offset
-
offset 可以得到任意样式表中的样式值
-
-
offsetWidth 包含padding+border+width
-
offsetWidth 等属性是只读属性，只能获取不能赋值
-
所以，我们想要获取元素大小位置，用offset更合适
style
-
style 只能得到行内样式表中的样式值
-
style.width 获得的是带有单位的字符串
-
style.width 获得不包含padding和border 的值
-
style.width 是可读写属性，可以获取也可以赋值
-
所以，我们想要给元素更改值，则需要用style改变
因为平时我们都是给元素注册触摸事件，所以重点记住 targetTocuhes
<!DOCTYPE html><html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.box {200px;height: 200px;background-color: pink;padding: 10px;}</style></head>
<body><div class="box" style=" 200px;"></div><script>// offset与style的区别var box = document.querySelector('.box');console.log(box.offsetWidth);console.log(box.style.width);// box.offsetWidth = '300px';box.style.width = '300px';</script></body>
</html>