jQuery偏移量offset

jQuery偏移量offset

jquery的参考文档地址：http://jquery.cuishifeng.cn/

获取匹配元素在当前视口的相对偏移。参照物是可视窗口。

返回的对象包含两个整型属性：top 和 left，以像素计。此方法只对可见元素有效。

position和offset相似，position的参照物是父亲窗口，必须是已经定位的父亲窗口。

初始：

点击按钮之后：

点击按钮设置偏移量，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
        }
        .c1{
            width: 200px;
            height: 200px;
            background-color: #2459a2;
        }
    </style>
</head>
<body>



<div class="c1"></div>
<button>change</button>
<script src="jquery-3.1.1.js"></script>

<script>

    // offset方法的参照物是可视窗口
    console.log($(".c1").offset());         // 偏移量对象
    console.log($(".c1").offset().top);     // 偏移量对象
    console.log($(".c1").offset().left);     // 偏移量对象
    
//    var top1=100
    $("button").click(function () {
        $(".c1").offset({"top":100,left:200})
    })
</script>
</body>
</html>

 

 

posted @ 2018-03-10 16:25  大川哥  阅读(3229)  评论(0)  编辑  收藏  举报