javascript中style.left和offsetLeft有什么区别？
程序员文章站
2022-05-10 19:22:36
offsetleft取到的值是数值型的，只能取值，不能赋值。
style.left在取值的时候要事先定义好，否则取到的值为空值，不仅仅可以取值，而且还可以赋值，取到的值为字符串类...
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> 上一篇： 商城项目 ajax，文件上传教程
下一篇： 清炖羊排萝卜汤的做法是什么