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 相关文章推荐
Prototype 工具函数 学习
Jul 23 Javascript
javascript 必知必会之closure
Sep 21 Javascript
javascript 函数声明与函数表达式的区别介绍
Oct 05 Javascript
JSON.parse()和JSON.stringify()使用介绍
Jun 20 Javascript
Angular.JS利用ng-disabled属性和ng-model实现禁用button效果
Apr 05 Javascript
socket.io学习教程之基础介绍(一)
Apr 29 Javascript
微信小程序搜索组件wxSearch实例详解
Jun 08 Javascript
基于BootStrap multiselect.js实现的下拉框联动效果
Jul 28 Javascript
老生常谈javascript的面向对象思想
Aug 22 Javascript
Vue中使用vux配置代码详解
Sep 16 Javascript
微信小程序基础教程之worker线程的使用方法
Jul 15 Javascript
JavaScript本地储存:localStorage、sessionStorage、cookie的使用
Oct 13 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 伪静态技术原理以及突破原理实现介绍
2013/07/12 PHP
PHP模拟asp中response类实现方法
2015/08/08 PHP
PHP实现断点续传乱序合并文件的方法
2018/09/06 PHP
Aster vs Newbee BO5 第一场2.19
2021/03/10 DOTA
jquery 应用代码 方便的排序功能
2010/02/06 Javascript
js实现杯子倒水问题自动求解程序
2013/03/25 Javascript
利用毫秒减值计算时长的js代码
2013/09/22 Javascript
JavaScript获取路径设计源码
2014/05/22 Javascript
angularjs学习笔记之三大模块(modal,controller,view)
2015/09/26 Javascript
利用Angularjs和原生JS分别实现动态效果的输入框
2016/09/01 Javascript
js编写三级联动简单案例
2016/12/21 Javascript
js的三种继承方式详解
2017/01/21 Javascript
JS如何实现在页面上快速定位(锚点跳转问题)
2017/08/14 Javascript
jQuery插件Validation表单验证详解
2018/05/26 jQuery
Android 自定义view仿微信相机单击拍照长按录视频按钮
2019/07/19 Javascript
转换layUI的数据表格中的日期格式方法
2019/09/19 Javascript
浅谈VUE中演示v-for为什么要加key
2020/01/16 Javascript
JS localStorage存储对象,sessionStorage存储数组对象操作示例
2020/02/15 Javascript
JS实现炫酷雪花飘落效果
2020/08/19 Javascript
Python中的with...as用法介绍
2015/05/28 Python
Python使用tkinter库实现文本显示用户输入功能示例
2018/05/30 Python
python中map的基本用法示例
2018/09/10 Python
Django框架模板注入操作示例【变量传递到模板】
2018/12/19 Python
基于python监控程序是否关闭
2020/01/14 Python
python里的单引号和双引号的有什么作用
2020/06/17 Python
Python类绑定方法及非绑定方法实例解析
2020/10/09 Python
如何用PyPy让你的Python代码运行得更快
2020/12/02 Python
python中的列表和元组区别分析
2020/12/30 Python
德国最大的婴儿用品网上商店:Kidsroom.de(支持中文)
2020/09/02 全球购物
学校安全检查制度
2014/01/27 职场文书
优秀干部获奖感言
2014/01/31 职场文书
小学教师培训感言
2014/02/11 职场文书
学雷锋志愿者活动总结
2014/06/27 职场文书
酒店服务员岗位职责
2015/02/09 职场文书
Vue3.0中Ref与Reactive的区别示例详析
2021/07/07 Vue.js
Python 第三方库 openpyxl 的安装过程
2022/12/24 Python