jQuery位置属性

编辑此博客

position

获取元素相对父元素的位置

<script type="text/javascript">
    $(function(){
        //获取元素相对父元素的位置
        console.log($("p").position().left)
        console.log($("p").position().top)
        var offsetTop=$("p").position().left;
        var offsetLeft=$("p").position().top;
        $("#btn").click(function (){
            $("p").animate({top:offsetTop+100,left:offsetLeft+100},1000)
        })
    })
</script>
View Code

//获取元素相对父元素的位置
console.log($("p").position().left)
console.log($("p").position().

offset

获取匹配元素在当前视口的相对浏览器左上角的偏移

<script type="text/javascript">
    $(function(){
        //获取匹配元素在当前视口的相对浏览器左上角的偏移
        var ovbo=$("#box").offset()
        console.log(ovbo.top)
        console.log(ovbo.left)
        //获取元素的宽、高
        $("#box").width()
        $("#box").height()
        //设置盒子宽、高
        $("#box").width(400)
        $("#box").height(400)
    })
</script>
View Code

scrollTop，scrollLeft

相对滚动条卷起的位置信息，即上左被遮挡的距离

scroll()监听滚动条，js中是onscroll()

<script type="text/javascript">
    $(function(){
        //匹配元素相对相对滚动条卷起的位置信息
        $(document).scroll(function () {
            console.log($(document).scrollTop())
            console.log($(document).scrollLeft())
        })
    })
</script>
View Code

innerHeight，innerWidth

包括内容和padding，不包括边框

outerHeight，outerWidth

包括内容，padding以及border

outerWeight

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery属性操作</title>
    <script src="js/jquery-3.3.1.js"></script>
    <style type="text/css">

        body{
            width: 2000px;
            height: 2000px;
            padding: 0;
            margin: 0;
        }
        *{
            padding: 0px;
            width: 0px;
        }
        #box{
            position: relative;
            width: 200px;
            height: 200px;
            border: 1px solid red;
            /*padding: 10px;*/
        }
        p{
            position: absolute;
            width: 100%;
            left: 30px;
            top: 30px;
        }
    </style>
</head>
<body>
    <div id="box">
        <p>一个p标签</p>
    </div>
    <button id="btn" style="width: 150px;">运动</button>
<div style="width: 200px;height: 200px;margin: 100px auto; border: 1px solid deeppink;"></div>
</body>
<script type="text/javascript">
    $(function(){
        /*
        //获取元素相对父元素的位置
        console.log($("p").position().left)
        console.log($("p").position().top)
        var offsetTop=$("p").position().left;
        var offsetLeft=$("p").position().top;
        $("#btn").click(function (){
            $("p").animate({top:offsetTop+100,left:offsetLeft+100},1000)
        })
        //匹配元素相对相对滚动条卷起的位置信息

        $(document).scroll(function () {
            console.log($(document).scrollTop())
            console.log($(document).scrollLeft())
        })
        */
        //获取匹配元素在当前视口的相对浏览器左上角的偏移
        var ovbo=$("#box").offset()
        console.log(ovbo.top)
        console.log(ovbo.left)
        //获取元素的宽、高
        $("#box").width()
        $("#box").height()
        //设置盒子宽、高
        $("#box").width(400)
        $("#box").height(400)

        //获取innerWidth，包括内容和padding区域，不包括border
        $("#box").innerWidth()
        $("#box").innerHeight()
    })
</script>
</html>
View Code
posted @ 2018-06-19 18:09  丫丫625202  阅读(273)  评论(0)  编辑  收藏  举报