位置相关属性offset(),position(),scrollTop()等-白红宇

位置相关属性offset(),position(),scrollTop()等

阅读量：6842 次

发布时间：2019-06-26

本文共 1914 字，大约阅读时间需要 6 分钟。

offset() :

获取匹配元素在当前窗口的相对偏移。位置是相对屏幕的，返回的对象包含两个整形属性：top 和 left。此方法只对可见元素有效。

DEMO:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>position()</title>

* { margin:0px; padding:0px; }

p { font-size:12px; height:40px; background:red; }

</style>

$(function() {

var p = $("p:last");

var offset = p.offset();

$("span").html( "left: " + offset.left + ", top: " + offset.top );

});

</script>

</head>

<body>

<p>first one</p>

<p>second one</p>

<p>third one</p>

</body>

</html>

position() :

获取匹配元素相对父元素的偏移。相对于父元素，并且父元素和子元素恤是绝对定位。

返回的对象包含两个整形属性：top 和 left。为精确计算结果，请在补白、边框和填充属性上使用像素单位。此方法只对可见元素有效。

DEMO:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>position()</title>

* { margin:0px; padding:0px; }

p { font-size:12px; height:40px; background:red; }

.pardentBox { width:500px; height:400px; margin-left:0px; margin-top:0px; background:#FF6699; position:relative; }

.innerBox { width:200px; height:100px; background:#CC0033; position:absolute; left:60px; top:100px; }

</style>

$(function() {

var innerBox = $(".innerBox");

var position =innerBox.position();

$("span").html( "left: " + position.left + ", top: " + position.top );

});

</script>

</head>

<body>

parent box

<div class="innerBox"> inner box </div>

</div>

</body>

</html>

转载地址：http://rjzul.baihongyu.com/

你可能感兴趣的文章

使用Xtrabackup对MySQL做主从复制

查看>>

HTML 元素和有效的 DTD文档类型

查看>>

shell 调试技术，伪信号打印程序出错位置

查看>>

（转）批处理

查看>>

struts标签绑定Map<String, List<Map<String, Object>>>

查看>>

navigator.userAgent.indexOf来判断浏览器类型

查看>>

【重磅消息】-支付宝小程序可以申请公测啦！！！

TransactionAnalyzer分析消息树序列图

查看>>

ROCKETMQ——NameServ源码分析

查看>>

Spring Boot 2 （一） System Requirements

varnish 4.0 官方文档翻译2-安装varnish

查看>>