jQuery尺寸,位置操作

m0_63400611

已于 2022-05-18 16:10:46 修改

阅读量65

点赞数

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

于 2022-03-10 22:56:23 首次发布

本文链接：https://blog.csdn.net/m0_63400611/article/details/123412014

版权

js 专栏收录该内容

55 篇文章 2 订阅

订阅专栏

jQuery尺寸

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

代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            padding: 10px;
            border: 15px solid red;
            margin: 20px;
        }
    </style>
</head>
<body>
    <div></div>
    <script src="../js/jQuery.js"></script>
    <script>
        $(function() {
            //width() / height() 获取/设置元素width和height大小
            console.log($('div').width);
            // $('div').width(300);

            //innerWidth() / innerHeight 获取/设置元素width和height + padding大小
            console.log($('div').innerWidth());//包含padding

            //outerWidth() / outerhHeight() 获取/设置元素width和height + padding + border大小
            console.log($('div').outerWidth());

            //outerWidth() / outerhHeight() 获取/设置元素width和height + padding + border + margin大小
            console.log($('div').outerWidth(true));
        })
    </script>
</body>
</html>

jQuery位置

位置主要有三个:offset(),position(),scrollTop() / scrollLeft()

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

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

position()获取元素偏移

position()方法用于返回被选元素相对于带有定位的父级偏移坐标,如果父级都没有定位,则以文档为准

代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .father {
            width: 400px;
            height: 400px;
            background-color: pink;
            margin: 100px;
            overflow: hidden;
            position: relative;
        }
        .son {
            width: 150px;
            height: 150px;
            background-color: purple;
            position: absolute;
            left: 10px;
            top: 10px;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <script src="../js/jQuery.js"></script>
    <script>
        $(function() {
            //获取/设置制距离文档的位置(偏移) offset
            console.log($('.son').offset());
            console.log($('.son').offset().top);//获取top属性
            // $('.son').offset({
            //     top: 200,
            //     left: 200
            // });

            //获取距离带有定位父级位置(偏移) position 如果没有带有定位父级, 则以文档为准
            console.log($('.son').position());
            $('.son').position({//这个方法只能获取不能设置
                top: 200,
                left: 200
            });
        })
    </script>
</body>
</html>

scrollTop()/scrollLeft()设置或获取元素被卷去的头部和左侧

scrollTop()方法设置或返回被选元素被卷去的头部

代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            margin: 500px auto;
            width: 1000px;
            height: 500px;
            background-color: pink;
        }
        .back {
            position: fixed;
            background-color: aqua;
            text-align: center;
            display: none;
            width: 45px;
            height: 45px;
            bottom: 50px;
            right: 30px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="back">返回顶部</div>
    <div class="container"></div>
    <script src="../js/jQuery.js"></script>
    <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);
                //只有元素才能动画 不能使用document
                $('body, html').stop().animate({
                    scrollTop: 0
                })
            })
        })
    </script>
</body>
</html>

当中返回顶部的animate()只有元素才能使用动画,document不能用做动画

m0_63400611

关注

0
点赞
踩
0

收藏

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

jQuery尺寸语法用法 width() / height() 取得匹配元素宽度和高度值只算width/height innerWidth() / innerHeight() 取得匹配元素宽度和高度值包含padding outerWidth() / outerHeight() 取得匹配元素宽度和高度值 padding,border outerWidth(true) / outerHeight(true) 取得匹配元素宽度和高度值包含padding,b
复制链接

扫一扫

专栏目录