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 相关文章推荐
从零开始学习jQuery (十) jQueryUI常用功能实战
Feb 23 Javascript
谈谈关于JavaScript 中的 MVC 模式
Apr 11 Javascript
javascript实现简单的Map示例介绍
Dec 23 Javascript
JS工作中的小贴士之”闭包“与事件委托的”阻止冒泡“
Jun 16 Javascript
jQuery 全选 全部选 反选 实现代码
Aug 17 Javascript
js编写的treeview使用方法
Nov 11 Javascript
jQuery实现对象转为url参数的方法
Jan 11 Javascript
jQuery模拟实现天猫购物车动画效果实例代码
May 25 jQuery
JavaScript时间戳与时间日期间相互转换
Dec 11 Javascript
JavaScript代码调试方法实例小结
Jan 05 Javascript
vue 获取元素额外生成的data-v-xxx操作
Sep 09 Javascript
在antd Table中插入可编辑的单元格实例
Oct 28 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查找与搜索数组元素方法总结
2015/06/12 PHP
thinkPHP引入类的方法详解
2016/12/08 PHP
jsp网页搜索结果中实现选中一行使其高亮
2014/02/17 Javascript
js统计页面的来访次数实现代码
2014/05/09 Javascript
jQuery选择器querySelector的使用指南
2015/01/23 Javascript
JavaScript中Boolean对象的属性解析
2015/10/21 Javascript
使用jquery提交form表单并自定义action的实现代码
2016/05/25 Javascript
ionic+AngularJs实现获取验证码倒计时按钮
2017/04/22 Javascript
vue.js开发实现全局调用的MessageBox组件实例代码
2017/11/22 Javascript
JavaScript中join()、splice()、slice()和split()函数用法示例
2018/08/24 Javascript
Vue 实现显示/隐藏层的思路(加全局点击事件)
2019/12/31 Javascript
JS制作简易计算器的实例代码
2020/07/04 Javascript
微信小程序实现拼图小游戏
2020/10/22 Javascript
Python解析nginx日志文件
2015/05/11 Python
Python实现截屏的函数
2015/07/25 Python
快速了解Python中的装饰器
2018/01/11 Python
Python之inspect模块实现获取加载模块路径的方法
2018/10/16 Python
Python 忽略warning的输出方法
2018/10/18 Python
Python操作配置文件ini的三种方法讲解
2019/02/22 Python
利用Python模拟登录pastebin.com的实现方法
2019/07/12 Python
python创建n行m列数组示例
2019/12/02 Python
python学生信息管理系统实现代码
2019/12/17 Python
python读取ini配置文件过程示范
2019/12/23 Python
Python进阶之迭代器与迭代器切片教程
2020/01/29 Python
浅谈python出错时traceback的解读
2020/07/15 Python
Django-Scrapy生成后端json接口的方法示例
2020/10/06 Python
python实现学生信息管理系统(精简版)
2020/11/27 Python
HTML5事件方法全部汇总
2016/05/12 HTML / CSS
美国克罗格超市在线购物:Kroger
2019/06/21 全球购物
在网络中有两台主机A和B,并通过路由器和其他交换设备连接起来,已经确认物理连接正确无误,怎么来测试这两台机器是否连通?如果不通,怎么来判断故障点?怎么排
2014/01/13 面试题
行政办公员自我评价分享
2013/12/14 职场文书
军训考核自我鉴定
2014/02/13 职场文书
难忘的一天教学反思
2014/04/30 职场文书
企业标语大全
2014/07/01 职场文书
中学生教师节演讲稿
2014/09/03 职场文书
pycharm代码删除恢复的方法
2021/06/26 Python