jQuery的位置信息

宽度和高度：

　　获取宽度： .width()

　　为匹配的元素集合中，获取第一个元素的的当前计算宽度值，这个方法不接受任何参数。 .css(width)和 .width()之间的区别是后者返回一个没有单位的数值，而前者返回的是带有完整单位的字符串，当一个元素的宽度需要数学计算的时候使用.width（）方法。

　　设置宽度：.width(value)

　　给每个匹配的元素都设置CSS宽度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            padding: 0;
            margin:0;
        }
        div{
            width: 100px;
            height: 100px;
            background-color: red;
            margin-bottom: 20px;

        }
    </style>
    <script type="text/javascript" src = "../../jquery-3.3.1.js"></script>
    <script type="text/javascript">
        $(function(){
            console.log($('div').width(200));
        });
    </script>
</head>
<body>
    <div></div>
    <div></div>
</body>
</html>

View Code

innerHeight()和innerWidth()

　　获取内部宽：.innerWidth()

　　为匹配的元素集合中获取第一个元素的当前计算宽度值，包括padding但是不包括border。

　　这个方法不适用于window和document对象，对于这些对象可以使用.width()代替。

　　设置内部宽：.innerWidth(value)

　　为匹配的集合中的每个元素设置CSS内部宽度，如果这个‘value’参数提供一个数字，jQuery会自动加上像素单位(px)

　　获取内部高：.innerHeight()

　　为匹配的元素集合中获取第一个元素的当前计算高度值，包括padding，不包括border。

　　这个方法不适用于window和document对象，对于这些对象可以使用.height()代替。

　　设置内部高：.innerHeight(value):

　　为匹配集合中的每个元素设置CSS内部高度。如果这个“value”参数提供一个数字，jQuery会自动加上像素单位（px）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            padding: 0;
            margin:0;
        }
        div{
            width: 100px;
            height: 100px;
            background-color: red;
            border:1px solid green;
            margin-bottom: 20px;

        }
    </style>
    <script type="text/javascript" src = "../../jquery-3.3.1.js"></script>
    <script type="text/javascript">
        // $(function(){
        //     console.log($('div').width(200));
        //     console.log($('div').height(200));
        // });
        $(function(){
            console.log($('div').innerHeight());
            console.log($('div').innerWidth());
            console.log($('div').innerHeight(200));
            console.log($('div').innerWidth(200));
        })
    </script>
</head>
<body>
    <div></div>
    <div></div>
</body>
</html>

View Code

outerWidth()和outerHeight()

　　获取外部宽：.outerWidth()

　　获取匹配元素集合中的第一个元素的当前计算外部宽度，包括padding，border和可选的margin.

　　默认值为 false. 表明是否在计算是包含元素的margin值。true即为包含。false:即为不包含。

　　设置外部宽：.outerWidth(value)

　　为匹配的每个元素设置CSS外部宽度。

　　获取外部高：.outerHeight()

　　获取匹配元素集合中的第一个元素的当前计算外部高度，包括padding，border和可选的margin.

　　默认值为 false. 表明是否在计算是包含元素的margin值。true即为包含。false:即为不包含。

　　设置外部高：.outerHeight(value)

　　为匹配集合中的每个元素设置CSS外部高度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            padding: 0;
            margin:0;
        }
        div{
            width: 100px;
            height: 100px;
            background-color: red;
            border:1px solid green;
            margin-bottom: 20px;
            margin-left: 20px;

        }
    </style>
    <script type="text/javascript" src = "../../jquery-3.3.1.js"></script>
    <script type="text/javascript">
        $(function(){
            console.log($('div').outerWidth());
            console.log($('div').outerWidth(true));
            console.log($('div').outerHeight());
            console.log($('div').outerHeight(true));
            $('div').outerWidth(200);
            $('div').outerHeight(200);
            console.log($('div').outerWidth());
            console.log($('div').outerWidth(true));
            console.log($('div').outerHeight());
            console.log($('div').outerHeight(true));
        })
    </script>
</head>
<body>
    <div></div>
    <div></div>
</body>
</html>

View Code

偏移

　　.offset()

　　返回值：Object，.offset()返回一个包含top和left属性的对象。

　　在匹配的元素集合中，获取第一个元素的当前坐标，坐标的数值是相对于文档。

　　注意：jQuery不支持获取隐藏元素的偏移坐标。同样的，也无法取得隐藏元素的 border, margin, 或 padding 信息。若元素的属性设置的是 visibility:hidden，那么我们依然可以取得它的坐标。

　　设置偏移：.offset(coordinaters)

　　设置匹配元素集合中每一个元素的坐标，坐标相对于文档。

　　coordinates：类型Object，一个包含top和left属性的对象，用整数指明元素的新顶部和左边坐标。

$(function(){
            console.log($('div').offset());
            $('div').offset({top:20,left:30});
            console.log($('div').offset());
        })

滚动距离：

　　水平方向获取值：.scrollLeft()

　　获取匹配的元素集合中第一个元素的当前水平滚动条的位置（页面卷走的宽度）

　　设置值：.scrollLeft(value)

　　设置每个匹配元素的水平方向滚动条位置.

　　垂直方向上获取值：scrollTop()

　　获取匹配的元素集合中第一个元素的当前迟滞滚动条的位置（页面卷走的高度）

　　设置值：.scorllTop(value)

　　设置每个匹配元素的垂直方向滚动条位置。

$(function(){
            console.log($(document).scrollLeft());
            console.log($(document).scrollTop());
        })

宽度和高度：

innerHeight()和innerWidth()

outerWidth()和outerHeight()

偏移

滚动距离：

猜你喜欢