美文网首页
5-7位置操作

5-7位置操作

作者: 大庆无疆 | 来源:发表于2019-03-16 15:05 被阅读0次
    元素相对页面的位置获取和设置

    方法:.offset()
    这个方法返回的是一个对象,有.left和.top属性

    获取
    $('#box').offset().left
    $('#box').offset().top
    设置
    $('#box').offset({ top: 10, left: 30 });
    设置值使用键值对的方式

    设置的时候元素在设置前如果没有脱离文档流,设置的时候会自动进行脱离文档流,默认为relative
    
    <body>
        <input type="button" name="" value="点击显示" id="btn">
        <div id="box"></div>
    
        <script type="text/javascript" src="js/jquery-1.12.2.min.js"></script>
        <script type="text/javascript">
            // 需求:点击按钮,让div的位置相对于目前的两倍
            // 页面加载事件
            $(function () {
                // 注册点击事件
                $('#btn').click(function () {
                    //获取位置,不带px------->都是数字类型
                    var boxLeft = $('#box').offset().left;
                    var boxTop = $('#box').offset().top;
                    // 重新设置
                    $('#box').offset({left: boxLeft * 2, top: boxTop * 2});
                });
            });
        </script>
    </body>
    

    相关文章

      网友评论

          本文标题:5-7位置操作

          本文链接:https://www.haomeiwen.com/subject/qwksmqtx.html