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 相关文章推荐
javascript测试题练习代码
Oct 10 Javascript
JS delegate与live浅析
Dec 21 Javascript
JavaScript中字符串(string)转json的2种方法
Jun 25 Javascript
javascript字符串循环匹配实例分析
Jul 17 Javascript
jQuery实现MSN中文网滑动Tab菜单效果代码
Sep 09 Javascript
Node.js编写爬虫的基本思路及抓取百度图片的实例分享
Mar 12 Javascript
谈谈JavaScript中的几种借用方法
Aug 09 Javascript
详解webpack2+React 实例demo
Sep 11 Javascript
LayUi中接口传数据成功,表格不显示数据的解决方法
Aug 19 Javascript
如何通过setTimeout理解JS运行机制详解
Mar 23 Javascript
详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决
Apr 14 Javascript
Vue的props父传子的示例代码
May 20 Javascript
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之COOKIE支持详解
2010/09/20 PHP
PHP模糊查询技术实例分析【附源码下载】
2019/03/07 PHP
PHP中str_split()函数的用法讲解
2019/04/11 PHP
javascript自适应宽度的瀑布流实现思路
2013/02/20 Javascript
js脚本获取webform服务器控件的方法
2014/05/16 Javascript
DIV+CSS+jQ实现省市联动可扩展
2016/06/22 Javascript
手机图片预览插件photoswipe.js使用总结
2016/08/25 Javascript
canvas 画布在主流浏览器中的尺寸限制详细介绍
2016/12/15 Javascript
vue组件的写法汇总
2018/04/12 Javascript
Vue2.0 v-for filter列表过滤功能的实现
2018/09/07 Javascript
详解Nuxt.js 实战集锦
2019/11/19 Javascript
Vue脚手架编写试卷页面功能
2020/03/17 Javascript
[01:42]辉夜杯战队访谈宣传片—FANTUAN
2015/12/25 DOTA
[01:06]DOTA2亚洲邀请赛专属珍藏-荧煌之礼
2017/03/24 DOTA
[00:43]魔廷新尊——痛苦女王至宝捆绑包
2020/06/12 DOTA
python中requests模块的使用方法
2015/04/08 Python
详解Python爬虫的基本写法
2016/01/08 Python
Python2.7简单连接与操作MySQL的方法
2016/04/27 Python
分享vim python缩进等一些配置
2018/07/02 Python
Python基础学习之基本数据结构详解【数字、字符串、列表、元组、集合、字典】
2019/06/18 Python
Pandas的read_csv函数参数分析详解
2019/07/02 Python
python定时任务 sched模块用法实例
2019/11/04 Python
python实现将json多行数据传入到mysql中使用
2019/12/31 Python
使用pyhon绘图比较两个手机屏幕大小(实例代码)
2020/01/03 Python
Python爬虫之Selenium设置元素等待的方法
2020/12/04 Python
python regex库实例用法总结
2021/01/03 Python
纯css3实现鼠标经过图片显示描述的动画效果
2014/09/01 HTML / CSS
Html5基于canvas实现电子签名并生成PDF文档
2020/12/07 HTML / CSS
生物学学生自我评价
2014/01/17 职场文书
工商管理专业毕业生自我鉴定2014
2014/10/04 职场文书
计划生育证明格式及范本
2014/10/09 职场文书
研究生给导师的自荐信
2015/03/06 职场文书
现役军人家属慰问信
2015/03/24 职场文书
《假如》教学反思
2016/02/17 职场文书
2021年最新用于图像处理的Python库总结
2021/06/15 Python
k8s部署redis cluster集群的实现
2021/06/24 Redis