提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其它

当前栏目

BOM ------ offset 和 style的区别

区别 ------ Style bom offset
2023-09-11 14:15:54 时间

offset 和 style的区别

offset

  1. offset可以得到任意样式表中的样式值
  2. offset获得的数值是没有单位的
  3. offsetWidth包含padding+border+width
  4. offsetWidth是只读属性,不能获取不能赋值

style

  1. style只能得到行内样式表中的样式值
  2. style.width获得的是带有单位的字符串
  3. style.width获得不包含padding和border的值
  4. style.width是可读写属性,可以获取也可以赋值

注:想要获取元素大小位置,用offset更合适 想要给元素更改值,用style改变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>offset与style的区别</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box" style="width: 200px;"></div>
    <script>
        // offset与style的区别
        var box = document.querySelector('.box')
        console.log(box.offsetWidth); //输出200
        console.log(box.style.width); //输出200px
        // box.offsetWidth = '300px' //不能改变 只读
        box.style.width = '300px'
    </script>
</body>
</html>

不积跬步无以至千里 不积小流无以成江海

相关文章