day16-Jquery 高度以及位置操作

一、前言

　　今天我们来研究 jquery的 高度以及 位置操作 ，这个是 http://jquery.cuishifeng.cn/  中的css操作里面的。

二、操作的html

1
2
3
4
5
6
7
8
9
10
11
12
<body>
    <div id="i1"></div>
    <div style="height: 200px;overflow: auto;width: 300px;">
        <p>dwbqjb</p><p>dwbqjb</p><p>dwbqjb</p><p>dwbqjb</p><p>dwbqjb</p><p>dwbqjb</p><p>dwbqjb</p><p>dwbqjb</p>
        <p>dwbqjb</p><p>dwbqjb</p><p>dwbqjb</p><p>dwbqjb</p><p>dwbqjb</p><p>dwbqjb</p><p>dwbqjb</p><p>dwbqjb</p>
        <p>dwbqjb</p><p>dwbqjb</p><p>dwbqjb</p><p>dwbqjb</p><p>dwbqjb</p><p>dwbqjb</p><p>dwbqjb</p><p>dwbqjb</p>
        <p>dwbqjb</p><p>dwbqjb</p><p>dwbqjb</p><p>dwbqjb</p><p>dwbqjb</p><p>dwbqjb</p><p>dwbqjb</p><p>dwbqjb</p>
    </div>
    <div id="i2"></div>
    <div style="height: 1000px;"></div>
    <script src="jquery-1.12.4.js"></script>
</body>

三、位置

3.1、scrollTop([val])

描述：获取匹配元素相对滚动条顶部的偏移。

1
2
3
4
5
$(window).scrollTop(); //表示当前window的滚动条距离顶部的值
$(window).scrollTop(0); //设置当前window返回顶部
 
$('div').scrollTop(); //表示当前div标签的滚动条距离顶部的值
$("div").scrollTop(0); //设置当前div标签返回顶部

效果图：

3.2、offset([coordinates])

描述：指定标签在html中的坐标

1
2
3
4
5
6
7
8
>>>$("#i1").offset() //获取id=i1标签的坐标
{top: 8, left: 8}
>>>$("#i2").offset()
{top: 208, left: 8}
>>>$("#i2").offset().top  //获取坐标的top值
208
>>>$("#i2").offset().left  //获取坐标的left值
8

3.3、position()

描述：指定标签相对父标签(relative)标签的坐标。注意这个只能找到上面父标签有relative的标签，所以下面的html，找到第一个div是没用的，直到找到父标签为relative.

1
2
3
4
5
<div style="position: relative;">
    <div>
        <div id="i3" style="position: absolute;"></div>
    </div>
</div>

如图所示：

四、尺寸

4.1、height()

说明：取得匹配元素当前计算的高度值（px）。代指纯高度，不包含其他高度。

1
$("p").height();

4.2、innerHeight()

描述：获取第一个匹配元素内部区域高度（包括补白、不包括边框）。

1
2
3
4
5
6
7
8
9
10
11
12
HTML 代码:
 
<p>Hello</p><p>2nd Paragraph</p>
 
jQuery 代码:
 
var p = $("p:first");
$("p:last").text( "innerHeight:" + p.innerHeight() );
 
结果:
 
<p>Hello</p><p>innerHeight: 16</p>

4.3、outerHeight()

描述：获取第一个匹配元素外部高度（默认包括补白和边框）。还有  ：outerHeight(true)

1
2
3
4
5
6
7
8
9
10
11
12
HTML 代码:
 
<p>Hello</p><p>2nd Paragraph</p>
 
jQuery 代码:
 
var p = $("p:first");
$("p:last").text( "outerHeight:" + p.outerHeight() + " , outerHeight(true):" + p.outerHeight(true) );
 
结果:
 
<p>Hello</p><p>outerHeight: 35 , outerHeight(true):55</p>

拿这几个测试：纯高度，边框，外边距，内边距。

 

posted @ 2018-05-24 11:30  东郭仔  阅读(109)  评论(0)    收藏  举报