offset与style的区别

offset

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>