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


Posted in Javascript onSeptember 29, 2013

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代码

<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="content-type"/>

<script type="text/javascript">
    function test1(){
          var div = document.getElementById("div1");
          document.getElementById("li1").innerHTML = (div.offsetTop)+"px";//div1距离屏幕顶部的距离
          document.getElementById("li2").innerHTML = (div.offsetLeft)+"px";//div1距离屏幕左部的距离
          document.getElementById("li3").innerHTML = (div.scrollTop)+"px";//div1纵向滚动条滚动的距离
          document.getElementById("li4").innerHTML = (div.scrollLeft)+"px";//div1横向滚动条滚动的距离
     }
      function test2(){
          var div = document.getElementById("div2");
          document.getElementById("li5").innerHTML = (div.offsetTop)+"px";//div2距离屏幕顶部的距离
          document.getElementById("li6").innerHTML = (div.offsetLeft)+"px";//div2距离屏幕左部的距离
          document.getElementById("li7").innerHTML = (div.scrollTop)+"px";//div2纵向滚动条滚动的距离
          document.getElementById("li8").innerHTML = (div.scrollLeft)+"px";//div2横向滚动条滚动的距离
     }
     function test3(){
          var div = document.getElementById("div3");
          document.getElementById("li9").innerHTML = (div.offsetTop)+"px";//div3距离屏幕顶部的距离
          document.getElementById("li10").innerHTML = (div.offsetLeft)+"px";//div3距离屏幕左部的距离
          document.getElementById("li11").innerHTML = (div.scrollTop)+"px";//div3纵向滚动条滚动的距离
          document.getElementById("li12").innerHTML = (div.scrollLeft)+"px";//div3横向滚动条滚动的距离
     }
</script>
</head>
<body style="border: 10px solid red;padding:0px 0px;margin:5px 10px">
    <div>
    <DIV style="width:70%;border-right:1px dashed red;float:left;">
        <div style="float:left;">
            <div id="div1" style="border:5px blue solid;height:400px;width:200px;overflow:auto">
                <div style="height: 500px;width:400px">this is test!</div>
            </div>
            <input type="button" value="CLICK 1" onclick="test1()" style="border: 1px solid purple;height: 25px;"/>
        </div>
        <div>
            <div id="div2" style="border:5px solid yellow;height:400px;width:200px;overflow:auto">
                <div style="height: 500px;width:400px">this is test!</div>
            </div>
            <input type="button" value="CLICK 2" onclick="test2()"style="border: 1px solid purple;height: 25px;"/>
        </div>
        <div style="clear: both;">
            <div id="div3" style="border:5px solid #0080C0;height:400px;width:200px;overflow:auto;clear:both;">
                <div style="height: 500px;width:400px">this is test!</div>
            </div>
            <input type="button" value="CLICK 3" onclick="test3()"style="border: 1px solid purple;height: 25px;"/>
        </div>
    </DIV>
    <DIV style="width: 20%;float:right;margin-right:100px">
        <ul>click1结果:
            <li id="li1"></li>
            <li id="li2"></li>
            <li id="li3"></li>
            <li id="li4"></li>
        </ul>
        <ul>click2结果:
            <li id="li5"></li>
            <li id="li6"></li>
            <li id="li7"></li>
            <li id="li8"></li>
        </ul>
        <ul>click3结果:
            <li id="li9"></li>
            <li id="li10"></li>
            <li id="li11"></li>
            <li id="li12"></li>
        </ul>
    </DIV>
    </div>
</body>
</html>

上面就是自己测试用的代码,可以直接拿来测试。
Javascript 相关文章推荐
JS面向对象、prototype、call()、apply()
May 14 Javascript
javascript针对DOM的应用分析(二)
Apr 15 Javascript
javascript修改IMG标签的src问题
Mar 28 Javascript
javascript学习笔记(一)基础知识
Sep 30 Javascript
JS根据生日算年龄的方法
May 05 Javascript
JavaScript中Function函数与Object对象的关系
Dec 17 Javascript
JavaScript获取服务器时间的方法详解
Dec 11 Javascript
前端构建工具之gulp的配置与搭建详解
Jun 12 Javascript
vue的token刷新处理的方法
Jul 17 Javascript
使用imba.io框架得到比 vue 快50倍的性能基准
Jun 17 Javascript
vue中封装axios并实现api接口的统一管理
Dec 25 Vue.js
详解vue之自行实现派发与广播(dispatch与broadcast)
Jan 19 Vue.js
jquery判断RadioButtonList和RadioButton中是否有选中项示例
Sep 29 #Javascript
基于jquery实现一张图片点击鼠标放大再点缩小
Sep 29 #Javascript
getJSON调用后台json数据时函数被调用两次的原因猜想
Sep 29 #Javascript
jquery事件与函数的使用介绍
Sep 29 #Javascript
Jquery选中或取消radio示例
Sep 29 #Javascript
JS中引用百度地图并将百度地图的logo和信息去掉
Sep 29 #Javascript
目前流行的JavaScript库的介绍及对比
Sep 29 #Javascript
You might like
用PHP写的MySQL数据库用户认证系统代码
2007/03/22 PHP
PHP正则表达式 /i, /is, /s, /isU等介绍
2014/10/23 PHP
PHP结合jQuery实现找回密码
2015/07/22 PHP
php5.3/5.4/5.5/5.6/7常见新增特性汇总整理
2020/02/27 PHP
JS使用replace()方法和正则表达式进行字符串的搜索与替换实例
2014/04/10 Javascript
jQuery仿Flash上下翻动的中英文导航菜单实例
2015/03/10 Javascript
javascript事件的传播基础实例讲解(35)
2017/02/14 Javascript
详解使用Node.js 将txt文件转为Excel文件
2017/07/05 Javascript
vuejs+element-ui+laravel5.4上传文件的示例代码
2017/08/12 Javascript
js 概率计算(简单版)
2017/09/12 Javascript
使用vue的transition完成滑动过渡的示例代码
2018/06/25 Javascript
小程序红包雨的实现示例
2019/02/19 Javascript
Vue infinite update loop的问题解决
2019/04/23 Javascript
小程序实现录音上传功能
2019/11/22 Javascript
JavaScript 浏览器对象模型BOM原理与常见用法实例分析
2019/12/16 Javascript
Vue路由的模块自动化与统一加载实现
2020/06/05 Javascript
微信小游戏中three.js离屏画布的示例代码
2020/10/12 Javascript
[10:07]2014DOTA2国际邀请赛 实拍选手现场观战DK对阵Titan
2014/07/12 DOTA
[53:10]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs VG 第一场
2018/04/11 DOTA
爬山算法简介和Python实现实例
2014/04/26 Python
python如何派生内置不可变类型并修改实例化行为
2018/03/21 Python
使用python画个小猪佩奇的示例代码
2018/06/06 Python
Python操作Excel插入删除行的方法
2018/12/10 Python
分享Python切分字符串的一个不错方法
2018/12/14 Python
计算机二级python学习教程(1) 教大家如何学习python
2019/05/16 Python
Python实现多线程/多进程的TCP服务器
2019/09/03 Python
浅谈python中统计计数的几种方法和Counter详解
2019/11/07 Python
使用pyshp包进行shapefile文件修改的例子
2019/12/06 Python
Python使用requests模块爬取百度翻译
2020/08/25 Python
python与c语言的语法有哪些不一样的
2020/09/13 Python
自我鉴定范文
2013/11/10 职场文书
雪山饭庄的创业计划书范文
2014/01/18 职场文书
情侣吵架检讨书
2014/02/05 职场文书
八一建军节感言
2014/02/28 职场文书
生产部厂长助理职位说明书
2014/03/03 职场文书
教师年终个人总结
2015/02/11 职场文书