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 Tips 使用DocumentFragment加快DOM渲染速度
Jun 28 Javascript
jQuery之网页换肤实现代码
Apr 30 Javascript
JQuery为textarea添加maxlength属性并且兼容IE
Apr 25 Javascript
js window.open弹出新的网页窗口
Jan 16 Javascript
jQuery操作属性和样式详解
Apr 13 Javascript
Bootstrap中data-target 到底是什么
Feb 14 Javascript
JS获取子、父、兄节点方法小结
Aug 14 Javascript
vue路由跳转传参数的方法
May 06 Javascript
vue + axios get下载文件功能
Sep 25 Javascript
详解Vue 项目中的几个实用组件(ts)
Oct 29 Javascript
vue中watch和computed为什么能监听到数据的改变以及不同之处
Dec 27 Javascript
微信小程序实现音频文件播放进度的实例代码
Mar 02 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中导出数据到excel时数字变为科学计数的解决方法
2013/02/03 PHP
使用YUI+Ant 实现JS CSS压缩
2014/09/02 PHP
PHP中开启gzip压缩的2种方法
2015/01/31 PHP
PHP获取不了React Native Fecth参数的解决办法
2016/08/26 PHP
UserData用法总结 lanyu出品
2010/07/01 Javascript
使用jquery mobile做幻灯播放效果实现步骤
2013/01/04 Javascript
js工具方法弹出蒙版
2013/05/08 Javascript
JavaScript中的常见问题解决方法(乱码,IE缓存,代理)
2013/11/28 Javascript
解决Jquery鼠标经过不停滑动的问题
2014/03/03 Javascript
bootstrap 模态框(modal)实现水平垂直居中显示
2017/01/23 Javascript
vue bus全局事件中心简单Demo详解
2018/02/26 Javascript
Vue入门之数量加减运算操作示例
2018/12/11 Javascript
vue封装一个简单的div框选时间的组件的方法
2019/01/06 Javascript
纯javascript实现选择框的全选与反选功能
2019/04/08 Javascript
原生JS实现顶部导航栏显示按钮+搜索框功能
2019/12/25 Javascript
ES6对象操作实例详解
2020/05/23 Javascript
探索node之事件循环的实现
2020/10/30 Javascript
python 安装virtualenv和virtualenvwrapper的方法
2017/01/13 Python
Pycharm设置utf-8自动显示方法
2019/01/17 Python
python函数装饰器之带参数的函数和带参数的装饰器用法示例
2019/11/06 Python
使用Django实现把两个模型类的数据聚合在一起
2020/03/28 Python
HTML5在a标签内放置块级元素示例代码
2013/08/23 HTML / CSS
IMPORT的选项IGNORE有什么作用?缺省是什么设置?
2015/09/17 面试题
生产班组长岗位职责
2014/01/05 职场文书
最新会计专业求职信范文
2014/01/28 职场文书
运动会入场词100字
2014/02/06 职场文书
企业指导教师评语
2014/04/28 职场文书
机械电子工程专业求职信
2014/06/22 职场文书
介绍信的写法
2015/01/31 职场文书
2015年销售人员工作总结
2015/04/07 职场文书
2015年人力资源工作总结
2015/04/08 职场文书
个人更名证明
2015/06/23 职场文书
pytorch 如何使用amp进行混合精度训练
2021/05/24 Python
Django rest framework如何自定义用户表
2021/06/09 Python
Pandas数据类型之category的用法
2021/06/28 Python
python标准库ElementTree处理xml
2022/05/20 Python