zoukankan      html  css  js  c++  java
  • jQuery 尺寸、位置操作

    1. jQuery 尺寸操作

    jQuery 尺寸操作包括元素宽高的获取和设置,且不一样的API对应不一样的盒子模型。

     

    代码演示

    <body>
        <div></div>
        <script>
            $(function() {
                // 1. width() / height() 获取设置元素 width和height大小 
                console.log($("div").width());
                // $("div").width(300);
    
                // 2. innerWidth() / innerHeight()  获取设置元素 width和height + padding 大小 
                console.log($("div").innerWidth());
    
                // 3. outerWidth()  / outerHeight()  获取设置元素 width和height + padding + border 大小 
                console.log($("div").outerWidth());
    
                // 4. outerWidth(true) / outerHeight(true) 获取设置 width和height + padding + border + margin
                console.log($("div").outerWidth(true));
            })
        </script>
    </body>

    注意:有了这套 API 我们将可以快速获取和子的宽高,至于其他属性想要获取和设置,还要使用 css() 等方法配合。

    1.4.2. jQuery 位置操作

    jQuery的位置操作主要有三个: offset()、position()、scrollTop()/scrollLeft() , 具体介绍如下:

    语法

     

    代码演示

    <body>
        <div class="father">
            <div class="son"></div>
        </div>
            
        <div class="back">返回顶部</div>
        <div class="container"></div>
       
        <script>
            $(function() {
                // 1. 获取设置距离文档的位置(偏移) offset
                console.log($(".son").offset());
                console.log($(".son").offset().top);
                // $(".son").offset({
                //     top: 200,
                //     left: 200
                // });
          
                // 2. 获取距离带有定位父级位置(偏移) position   如果没有带有定位的父级,则以文档为准
                // 这个方法只能获取不能设置偏移
                console.log($(".son").position());
                // $(".son").position({
                //     top: 200,
                //     left: 200
                // });
          
                  // 3. 被卷去的头部
                  $(document).scrollTop(100);
                // 被卷去的头部 scrollTop()  / 被卷去的左侧 scrollLeft()
                // 页面滚动事件
                var boxTop = $(".container").offset().top;
                $(window).scroll(function() {
                    // console.log(11);
                    console.log($(document).scrollTop());
                    if ($(document).scrollTop() >= boxTop) {
                        $(".back").fadeIn();
                    } else {
                        $(".back").fadeOut();
                    }
                });
                // 返回顶部
                $(".back").click(function() {
                    // $(document).scrollTop(0);
                    $("body, html").stop().animate({
                        scrollTop: 0
                    });
                    // $(document).stop().animate({
                    //     scrollTop: 0
                    // }); 不能是文档而是 html和body元素做动画
                })
            })
        </script>
    </body>
    时间如白驹过隙,忽然而已,且行且珍惜......
  • 相关阅读:
    在日志中记录Java异常信息的正确姿势
    基于Spring Boot架构的前后端完全分离项目API路径问题
    Spring生态简介
    WebSocket协议入门介绍
    Spring Boot程序正确停止的姿势
    python 中 __init__方法
    python中的if __name__ == 'main'
    python 类和实例
    内建模块 datetime使用
    内建模块collections的使用
  • 原文地址:https://www.cnblogs.com/UnfetteredMan/p/13736605.html
Copyright © 2011-2022 走看看