• 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
        })
    })
  • 相关阅读:
    Leetcode: Word Ladder II
    Leetcode: Triangle
    Leetcode: Best Time to Buy and Sell Stock II
    Leetcode: Best Time to Buy and Sell Stock
    Leetcode: Pascal's Triangle II
    Leetcode: Pascal's Triangle
    Leetcode: Path Sum II
    Leetcode: Convert Sorted Array to Binary Search Tree
    Leetcode: Merge Sorted Array
    Leetcode: Word Search
  • 原文地址:https://www.cnblogs.com/caicaihong/p/9379154.html
Copyright © 2020-2023  润新知