首页 > web前端 > js教程 > js中的scroll和offset 使用比较的实例与分析_javascript技巧

js中的scroll和offset 使用比较的实例与分析_javascript技巧

WBOY
发布: 2016-05-16 17:21:06
原创
917 人浏览过

1.offsetTop     :
当前对象到其上级层顶部的距离.
不能对其进行赋值.设置对象到页面顶部的距离请用style.top属性.

2.offsetLeft    :
当前对象到其上级层左边的距离.
不能对其进行赋值.设置对象到页面左部的距离请用style.left属性.

3.offsetWidth   :
当前对象的宽度.
与style.width属性的区别在于:如对象的宽度设定值为百分比宽度,则无论页面变大还是变小,style.width都返回此百分比,而offsetWidth则返回在不同页面中对象的宽度值而不是百分比值

4.offsetHeight :
与style.height属性的区别在于:如对象的宽度设定值为百分比高度,则无论页面变大还是变小,style.height都返回此百分比,而offsetHeight则返回在不同页面中对象的高度值而不是百分比值

5.offsetParent  :
当前对象的上级层对象.
注意.如果对象是包括在一个DIV中时,此DIV不会被当做是此对象的上级层,(即对象的上级层会跳过DIV对象)上级层是Table时则不会有问题.
利用这个属性,可以得到当前对象在不同大小的页面中的绝对位置.

6.scrollLeft    :
对象的最左边到对象在当前窗口显示的范围内的左边的距离.
即是在出现了横向滚动条的情况下,滚动条拉动的距离.

7.scrollTop
对象的最顶部到对象在当前窗口显示的范围内的顶边的距离.
即是在出现了纵向滚动条的情况下,滚动条拉动的距离.

 

【代码】测试offsetTop和scrollTop的html代码

复制代码 代码如下:







   

   

       

           

               
this is test!

           

           
       

       

           

               
this is test!

           

           
       

       

           

               
this is test!

           

           
       

   

   

       
    click1结果:
               

  •            

  •            

  •            

  •        

       
    click2结果:
               

  •            

  •            

  •            

  •        

       
    click3结果:
               

  •            

  •            

  •            

  •        

   

   




上面就是自己测试用的代码,可以直接拿来测试。
相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板