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);
        }

//父元素有定位属性
         $( " #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 >

 

转载于:https://www.cnblogs.com/ForFreeDom/archive/2009/12/10/1621081.html