jQuery尺寸位置操作

柒边形选手

已于 2022-02-13 17:28:46 修改

阅读量169

点赞数

分类专栏：笔记文章标签： jquery javascript 前端

于 2022-02-13 16:06:01 首次发布

本文链接：https://blog.csdn.net/m0_55201788/article/details/122908250

版权

笔记专栏收录该内容

85 篇文章 0 订阅

订阅专栏

1.尺寸

语法	用法
width() / height()	取得匹配元素宽度和高度值只算width / height
innerWidth() / innerHieght()	取得匹配元素宽度和高度值包含 padding
outerWidth() / outerHeight()	取得匹配元素宽度和高度值包含 padding、border
outerWidth(true)/outerHeight(true)	取得匹配元素宽度和高度值包含padding、borde、margin

以上参数（括号里）为空，则是获取相应值，返回的是数字型。
如果参数（括号里）为数字，则是修改相应值。
参数可以不带单位

<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>

2.位置

(1)offset()设置或获取元素偏移

offset()方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系。
该方法有2个属性left、top。offset().top用于获取距离文档顶部的距离，offset().left用于获取距离文档左侧的距离。
可以设置元素的偏移:offset({ top: 10, left: 30 });

(2)position()获取元素偏移

position() 方法用于返回被选元素相对于带有定位的父级偏移坐标,如果父级都没有定位,则以文档为准。
这个方法只能获取不能设置偏移

<body>
    <div class="father">
        <div class="son"></div>
    </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
            // });
        })
    </script>
</body>

(3) scrollTop0/scrollLeft()设置或获取元素被卷去的头部和左侧
scrollTop() 方法设置或返回被选元素被卷去的头部。
scrollLeft() 方法设置或返回被选元素被卷去的左侧。

返回顶部动画选中的部分不能是文档而是 html和body元素做动画

<body>
    <div class="back">返回顶部</div>
    <div class="container">
    </div>
    <script>
        $(function() {
            $(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>

滚动时,判断是否要显示侧边导航栏，以及到达指定位置时，侧边导航栏有背景变化；点击侧边导航栏，到达指定位置。

$(function() {
    // 当我们点击了小li 此时不需要执行 页面滚动事件里面的 li 的背景选择 添加 current
    // 节流阀  互斥锁 
    var flag = true;
    // 1.显示隐藏电梯导航
    var toolTop = $(".recommend").offset().top;
    toggleTool();//调用函数，是否显示出侧边导航栏

    function toggleTool() {//当到达指定位置，显示侧边导航栏
        if ($(document).scrollTop() >= toolTop) {
            $(".fixedtool").fadeIn();
        } else {
            $(".fixedtool").fadeOut();
        };
    }
    $(window).scroll(function() {
        toggleTool();
        // 3. 页面滚动到某个内容区域，左侧电梯导航小li相应添加和删除current类名(背景颜色)
        if (flag) {//当点击侧边导航栏时，不执行滚动才触发的效果
            $(".floor .w").each(function(i, ele) {
                if ($(document).scrollTop() >= $(ele).offset().top) {
                    console.log(i);
                    $(".fixedtoolli").eq(i).addClass("current").siblings().removeClass();
                }
            })
        }
    });
    // 2. 点击电梯导航页面可以滚动到相应内容区域
    $(".fixedtool li").click(function() {
        flag = false;//当点击时，将滚动效果的节流阀设置为false，即不执行滚动效果
        console.log($(this).index());
        // 当我们每次点击小li 就需要计算出页面要去往的位置 
        // 选出对应索引号的内容区的盒子 计算它的.offset().top
        var current = $(".floor .w").eq($(this).index()).offset().top;
        // 页面动画滚动效果
        $("body, html").stop().animate({
            scrollTop: current
        }, function() {
            flag = true;
        });
        // 点击之后，让当前的小li 添加current 类名 ，姐妹移除current类名
        $(this).addClass("current").siblings().removeClass();
    })
})

柒边形选手

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery尺寸位置操作

1.尺寸语法用法 width() / height() 取得匹配元素宽度和高度值只算width / height innerWidth() / innerHieght() 取得匹配元素宽度和高度值包含 padding outerWidth() / outerHeight() 取得匹配元素宽度和高度值包含 padding、border outerWidth(true)/outerHeight(true) 取得匹配元素宽度和高度值包含padding、borde
复制链接

扫一扫

专栏目录