美文网首页
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位置操作

    元素相对页面的位置获取和设置方法:.offset()这个方法返回的是一个对象,有.left和.top属性获取$('...

  • word操作位置

    开始 1.字体(设置字体格式,大小) 插入 页眉和页脚:任意页插入页眉或页脚 步骤:插入分节符(页面布局)-断开节...

  • jQuery子元素的操作

    常用子元素的操作 位置操作

  • 5-7 DOM结构操作-解答

    DOM是哪种基本的数据结构 树 修改和获取

  • 卡在 Building 'android' Gr

    如果卡在这个界面则不奇怪, 这是下载 gradle 下载的位置上, 这个可能会耗费 5-7 分钟的时间. 通常会根...

  • JQuery01-基础操作

    1、 HTML代码、文本、值 2、属性操作 3、样式操作 4、位置操作 5、尺寸操作

  • 笔记

    目录 元素查找 class操作 节点操作 属性操作 内容操作 css操作 位置大小 事件 DOM加载完毕 绑定上下...

  • 五、jQuery操作css、位置属性和尺寸属性

    jQuery操作css属性jQuery操作位置属性jQuery操作尺寸属性 1. jQuery操作css属性 逐个...

  • LinkedList

    LinkedList线程不安全, 不指定位置add操作 不指定位置的添加操作;image.png 把当前尾节点暂存...

  • CLLocationManager

    CLLocationManager(位置管理者) CLLocationManager的常用操作 开始更新用户位置 ...

网友评论

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

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