当前位置： 移动技术网 > IT编程>开发语言>JavaScript > javascript中style.left和offsetLeft有什么区别？

javascript中style.left和offsetLeft有什么区别？

2019年05月17日  | 移动技术网IT编程  | 我要评论

offsetleft取到的值是数值型的，只能取值，不能赋值。

style.left在取值的时候要事先定义好，否则取到的值为空值，不仅仅可以取值，而且还可以赋值，取到的值为字符串类型的。 demo代码如下：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>document</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 600px;
            height: 600px;
            margin: 20px;
            padding: 20px;
            border: 1px solid #000;
            position: absolute;
        }
        .box1 {
            width: 400px;
            height: 400px;
            margin: 20px;
            padding: 20px;
            border: 1px solid #000;
        }
        .box2 {
            width: 100px;
            height: 100px;
            margin: 20px;
            padding: 20px;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <p class="box" id="box">
        <p class="box1" id="box1" style="left:20px;">
            <p class="box2" id="box2"></p>
        </p>
    </p>
    <script type="text/javascript">
        var box2 = document.getelementbyid("box2");
        var box = document.getelementbyid("box");
        var box1 = document.getelementbyid("box1");
        console.log(box1.offsetleft);//offsetleft是相对于有定位盒子的距离
        console.log(box1.style.left);//style.left的值事先要定义好，否则取到的值为空值。
        box1.style.left = "30px";
        console.log(box1.style.left);
        console.log(box2.offsetparent);
        console.log(typeof(box1.offsetleft))
    </script>
</body>
</html>

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网