jQuery之位置坐标图形相关方法(offset\offset\position\scrollTop\scrollLeft\width\height\innerWidth\outerWidth)

&XYZ&

于 2020-04-08 08:42:54 发布

阅读量227

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/JEFF_luyiduan/article/details/105356808

版权

jquery 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

文章目录

offset取值、offset设值

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>温故而知"心"</title>
    <style>
        .wrapper {
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: #ff0000;
            left: 70px;
            top: 70px;
        }

        .wrapper .demo {
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: #0000ff;
            left: 20px;
            top: 20px;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <div class="demo"></div>
    </div>
</body>

<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
    //offset取值
    //得到top和left距离文档的距离
    console.log($('.demo').offset())

    //offset设值
    $('.demo').offset({ left: 200, top: 200 })
    console.log($('.demo').offset())
</script>

</html>

position

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>温故而知"心"</title>
    <style>
        .wrapper {
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: #ff0000;
            left: 70px;
            top: 70px;
        }

        .wrapper .demo {
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: #0000ff;
            left: 20px;
            top: 20px;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <div class="demo"></div>
    </div>
</body>

<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
    //position 和 css 定位规则一样
    console.log($('.demo').position())
</script>

</html>

scrollTop、scrollLeft

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>温故而知"心"</title>
    <style>
        .wrapper {
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: #ff0000;
            left: 70px;
            top: 70px;
        }

        .wrapper .demo {
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: #0000ff;
            left: 20px;
            top: 20px;
        }

        body {
            width: 3000px;
            height: 3000px;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <div class="demo"></div>
    </div>
</body>

<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
//    页面滚动了多少的距离(获取值)
//    $(window).scrollTop()
//    $(window).scrollLeft()

//    赋值
//    $(window).scrollTop(100)

</script>
</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>温故而知"心"</title>
    <style>
        .test {
            width: 200px;
            height: 200px;
            overflow: auto;
            border: 7px solid #333333;
        }

        .test p {
            width: 3000px;
            height: 3000px;
            background-color: #ff0000;
        }
    </style>
</head>

<body>
    <div class="test">
        <p></p>
    </div>
</body>

<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
    //检查div也是可以的
    // $('.test').scrollTop()
    //赋值也是可以的
     // $('.test').scrollTop(0)
</script>

</html>

width、height、innerWidth、innerHeight、outerWidth、outerHeight

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>温故而知"心"</title>
    <style>
        .demo {
            width: 200px;
            height: 200px;
            background-color: #ff0000;
            border: 20px solid #333333;
            padding: 15px;
            margin: 10px;
        }
    </style>
</head>

<body>
    <div class="demo"></div>
</body>

<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
    // width height
    // content
    console.log($('.demo').width())
    console.log($('.demo').height())

    // innerWidth innerHeight
    // content + padding
    console.log($('.demo').innerWidth())
    console.log($('.demo').innerHeight())

    // outerWidth outerHeight
    // content + padding + border
    console.log($('.demo').outerWidth())
    console.log($('.demo').outerHeight())

    // outerWidth outerHeight
    // content + padding + border + margin
    console.log($('.demo').outerWidth(true))
    console.log($('.demo').outerHeight(true))
</script>

</html>

&XYZ&

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery之位置坐标图形相关方法(offset\offset\position\scrollTop\scrollLeft\width\height\innerWidth\outerWidth)

文章目录offset取值、offset设值positionoffset取值、offset设值<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, in...
复制链接

扫一扫