zoukankan      html  css  js  c++  java
  • jQuery之offset,position

    获取/设置标签的位置数据
    * offset(): 相对页面左上角的坐标
    * position(): 相对于父元素左上角的坐标.

    需求:
    1. 点击 btn1
    打印 div1 相对于页面左上角的位置
    打印 div2 相对于页面左上角的位置
    打印 div1 相对于父元素左上角的位置
    打印 div2 相对于父元素左上角的位置
    2. 点击 btn2
    设置 div2 相对于页面的左上角的位置

    代码实现:

    //1. 点击 btn1
    $("#btn1").click(function(){
        //  打印 div1 相对于页面左上角的位置 10 20
        var offet = $(".div1").offset();
        console.log("left:"+offet.left+",top:"+offet.top);
        //  打印 div2 相对于页面左上角的位置 10 70
        var offet2 = $(".div2").offset();
        console.log("left:"+offet2.left+",top:"+offet2.top);
        
        //  打印 div1 相对于父元素左上角的位置 10 20
        var position = $(".div1").position();
        console.log("left:"+position.left+",top:"+position.top);
        //  打印 div2 相对于父元素左上角的位置 0 50
        var position = $(".div2").position();
        console.log("left:"+position.left+",top:"+position.top);
        
    });
    ///2. 点击 btn2
    $("#btn2").click(function(){
        //设置 div2 相对于页面的左上角的位置
        $(".div2").offset({
            left:50,
            top:70
        })
    })
  • 相关阅读:
    ES6学习之装饰器
    ES6学习之Class
    ES6学习之Async函数
    ES6学习之Generator函数
    for循环及break和continue的区别
    ES6学习之Iterator和For...of循环
    js检测对象属性
    ES6学习之Promise
    ES6学习之Reflect
    Visual Studio references中的package找不到
  • 原文地址:https://www.cnblogs.com/caicaihong/p/9379154.html
Copyright © 2011-2022 走看看