jquery中的position()测试
代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
<script type="text/javascript" src="core/jquery-1.3.1.min.js"></script>
<style type="text/css">
body{padding-top:100px;}
.testdiv
{
border: 1px solid red;
height: 100px;
width: 100px;
}
.class1
{
border: 1px solid #275f92;
font-size: 12px;
height: 495px;
margin-left: 10px;
overflow: auto;
overflow-x: hidden;
width: 805px;
}
.class2
{
border: 1px solid #275f92;
font-size: 12px;
height: 495px;
margin-left: 10px;
overflow: auto;
overflow-x: hidden;
position:relative;
width: 805px;
}
</style>
<script type="text/javascript">
$(function(){
//父元素无定位属性
$("#conn").addClass("class1");
for(var i=1;i<5;i++)
{
pppp=$("#ih"+i).position();
alert(pppp.top);
}
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
<script type="text/javascript" src="core/jquery-1.3.1.min.js"></script>
<style type="text/css">
body{padding-top:100px;}
.testdiv
{
border: 1px solid red;
height: 100px;
width: 100px;
}
.class1
{
border: 1px solid #275f92;
font-size: 12px;
height: 495px;
margin-left: 10px;
overflow: auto;
overflow-x: hidden;
width: 805px;
}
.class2
{
border: 1px solid #275f92;
font-size: 12px;
height: 495px;
margin-left: 10px;
overflow: auto;
overflow-x: hidden;
position:relative;
width: 805px;
}
</style>
<script type="text/javascript">
$(function(){
//父元素无定位属性
$("#conn").addClass("class1");
for(var i=1;i<5;i++)
{
pppp=$("#ih"+i).position();
alert(pppp.top);
}
//父元素有定位属性
$("#conn").addClass("class2");
for(var i=1;i<5;i++)
{
pppp=$("#ih"+i).position();
alert(pppp.top);
}
//父元素有滚动属性且有定位属性
$("#conn").addClass("class1");
$("#conn").scrollTop(300);
for(var i=1;i<5;i++)
{
pppp=$("#ih"+i).position();
alert(pppp.top);
}
});
</script>
</head>
<body>
<div id="conn">
<div class="testdiv" id="ih1">
sdfasdfasdfs
</div>
<div class="testdiv" id="ih2">
sdfasdfasdfs
</div>
<div class="testdiv" id="ih3">
sdfasdfasdfs
</div>
<div class="testdiv" id="ih4">
sdfasdfasdfs
</div>
<div class="testdiv">
sdfasdfasdfs
</div>
<div class="testdiv">
sdfasdfasdfs
</div>
</div>
</body>
</html>
$("#conn").addClass("class2");
for(var i=1;i<5;i++)
{
pppp=$("#ih"+i).position();
alert(pppp.top);
}
//父元素有滚动属性且有定位属性
$("#conn").addClass("class1");
$("#conn").scrollTop(300);
for(var i=1;i<5;i++)
{
pppp=$("#ih"+i).position();
alert(pppp.top);
}
});
</script>
</head>
<body>
<div id="conn">
<div class="testdiv" id="ih1">
sdfasdfasdfs
</div>
<div class="testdiv" id="ih2">
sdfasdfasdfs
</div>
<div class="testdiv" id="ih3">
sdfasdfasdfs
</div>
<div class="testdiv" id="ih4">
sdfasdfasdfs
</div>
<div class="testdiv">
sdfasdfasdfs
</div>
<div class="testdiv">
sdfasdfasdfs
</div>
</div>
</body>
</html>
