jQuery练习t202，从0到1

最新推荐文章于 2024-10-07 09:24:46 发布

虾米大王

最新推荐文章于 2024-10-07 09:24:46 发布

阅读量190

点赞数

分类专栏： jQuery JavaScript 文章标签： javascript jquery

本文链接：https://blog.csdn.net/modern358/article/details/113523212

版权

JavaScript 同时被 2 个专栏收录

329 篇文章 0 订阅

订阅专栏

jQuery

296 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #father{
            position: relative;
            width: 200px;
            height: 200px;
            background-color: orange;
        }
        #son{
            position: absolute;
            top: 20px;
            left: 50px;
            width: 50px;
            height: 50px;
            background-color: red;
        }
    </style>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
            //样式操作
            //position（）方法
           var top = $("#son").position().top;
           var left = $("#son").position().left;
           var result = "子元素相对父元素顶部的距离是：" + top + "px\n"
            + "子元素相对父元素左部的距离是：" + left + "px";
           alert(result);
        });

        /*
        在jQuery中，我们可以使用position（）方法获取或设置当前
        元素相对于最近被定位的祖先元素的偏移位置。

        position（）方法返回一个坐标对象，该对象有两个属性，
        这两个属性返回不带单位的数字。
        top属性，标识获取元素相对于最近被定位的祖先元素顶部的距离。
        left属性，标识获取元素相对于最近被定位的祖先元素左部的距离。
         */
    </script>
</head>
<body>
    <div id="father">
        <div id="son"></div>
    </div>
</body>
</html>