我的jQuery第九天，实例方法，位置图形

最新推荐文章于 2022-09-07 08:53:11 发布

九依

最新推荐文章于 2022-09-07 08:53:11 发布

阅读量113

点赞数

分类专栏：小白文章标签： js

本文链接：https://blog.csdn.net/Yzhoun/article/details/107372994

版权

小白专栏收录该内容

39 篇文章 0 订阅

订阅专栏

我的jQuery第九天-实例方法，位置图形

位置坐标图形大小的相关方法

offset()
position()
scrollTop scrollLeft()
width() height()
innerWidth() outerWidth() innerHeight() outerWidth()

offset

会返回对象，分别记录了left 和 top距文档的距离

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .wrapper{
            position: relative;
            width: 300px;
            height: 300px;
            background: red;
            left: 100px;
            top: 100px;
        }
        .wrapper .demo{
            position: absolute;
            width: 50px;
            height: 50px;
            background: orange;
            left: 50px;
            top: 50px;
        }
    </style>
</head>
<div class="wrapper">
    <div class="demo"></div>
</div>
<body>
    <script src="./js/jquery-1.8.3.min.js"></script>
    <script>
        console.log($('.demo').offset({left:50,top:50}))
    </script>

position()

取元素距父元素的距离有多少,和css定位规则一样

srcollTop scrollLeft

获取滚动条的位置

$(window).srcollTop()
$(window).srcollLeft()

width height

只针对内容的宽度和高度

innerWidth innerWidth outerWidth innerHeight outerWidth

innerWidth会把内容和padding加进去
outerWidth会把内容加padding和border加进去
outerWidth可以放参数true,会把内容加padding和border和margin加进去

九依

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
我的jQuery第九天，实例方法，位置图形

我的jQuery第九天-实例方法，位置图形位置坐标图形大小的相关方法offset()position()scrollTop scrollLeft()width() height()innerWidth() outerWidth() innerHeight() outerWidth()offset会返回对象，分别记录了left 和 top距文档的距离<style> *{ margin: 0; padding:
复制链接

扫一扫