jquery尺寸和位置操作

最新推荐文章于 2022-11-10 20:29:49 发布

sayHello被注册

最新推荐文章于 2022-11-10 20:29:49 发布

阅读量215

点赞数

文章标签： offset position jquery的css方法

本文链接：https://blog.csdn.net/qq_31301067/article/details/94895917

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery尺寸和位置操作</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .father{
            margin-left: 100px;
            margin-top: 50px;
            width: 400px;
            height: 400px;
            background-color: yellow;
            position: relative;
        }
        .son{
            /*margin-left: 50px;*/
            left: 50px;
            width: 150px;
            height: 150px;
            background-color: red;
            position: absolute;
        }
        button{
            margin-left: 100px;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <button>获取位置</button>
    <button>设置元素偏移</button>
</body>
<script>
    $("button").click(function () {
        //获取元素距离窗口的偏移位
        console.log($(".son").offset().left) //200

        //position() 获取元素距离定位元素的偏移位
        console.log($(".son").position().left) //50
    })

    $("button:eq(1)").click(function () {
        // $(".son").offset({//设置距离窗口的距离
        //     left:10
        // })

        //注意点:position方法只能获取不能设置
        // $(".son").position({
        //     left:10
        // });

        //设置距离具有定位属于的一级的距离
        $(".son").css({
            left:"10px"
        })

    })
</script>
</html>

sayHello被注册

关注

0
点赞
踩
1

收藏

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

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jquery尺寸和位置操作</title> <script type="text/javascript" src="http://code.jquery.c...
复制链接

扫一扫