javascript中的上下左右位置

原生js方法,获取绝对left和top值,可以用offsetTop和offsetLeft,可以用offsetParent获取相对父级节点。

在jquery中,可以用offset().top获取绝对值,也可以用position().top获取。区别是,offset().top 和offsetTop都会将margin算进去,但是position().top不会。而且position().top

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<style>
*{
    margin:0;
    padding:0;
}
#div1{
    width:100px;
    height:100px;
    background: #000;
    position: absolute;
    left:200px;
    top:20px;
    border: 2px solid #990000;
    margin-top: 150px;
    padding: 10px;
}
</style>
<div id="div1"></div>
<script>
var oDiv = document.getElementById('div1');
oLeft = oDiv.offsetLeft;
oTop = oDiv.offsetTop;
parent = oDiv.offsetParent;
console.log(oLeft);     //200
console.log(oTop);      //20
console.log(parent);    //body
console.log(document.body.clientWidth);  //网页大小

</script>

<!--在jquery中,可以用offset().top 和position().top-->
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
var oDiv = $('#div1');
var oTop =oDiv.offset().top;
var oTop2 =oDiv.position().top;
console.log(oTop);     //200
console.log(oTop2)     //200

</script>
</body>
</html>

随机浏览