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定义变量时有var和没有var的区别探讨
Jul 21 Javascript
javascript日期验证之输入日期大于等于当前日期
Dec 13 Javascript
Bootstrap使用基础教程详解
Sep 05 Javascript
jquery把int类型转换成字符串类型的方法
Oct 07 Javascript
概述javascript在Google IE中的调试技巧
Nov 24 Javascript
javascript 定时器工作原理分析
Dec 03 Javascript
jQuery中值得注意的trigger方法浅析
Dec 12 Javascript
Vue-cli创建项目从单页面到多页面的方法
Sep 20 Javascript
简单明了区分escape、encodeURI和encodeURIComponent
May 26 Javascript
vue移动端实现红包雨效果
Jun 23 Javascript
js实现时分秒倒计时
Dec 03 Javascript
jQuery插件实现图片轮播效果
Oct 19 jQuery
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
深入apache配置文件httpd.conf的部分参数说明
2013/06/28 PHP
php基于socket实现SMTP发送邮件的方法
2015/03/05 PHP
让你的PHP7更快之Hugepage用法分析
2016/05/31 PHP
php str_replace替换指定次数的方法详解
2017/05/05 PHP
PHP封装mysqli基于面向对象的mysql数据库操作类与用法示例
2019/02/25 PHP
PHP实现提高SESSION响应速度的几种方法详解
2019/08/09 PHP
在JavaScript中获取请求的URL参数
2010/12/22 Javascript
javascript 得到文件后缀名的思路及实现
2020/05/09 Javascript
构造函数+原型模式构造js自定义对象(最通用)
2014/05/12 Javascript
超赞的动手创建JavaScript框架的详细教程
2015/06/30 Javascript
jQuery绑定事件监听bind和移除事件监听unbind用法实例详解
2016/01/19 Javascript
jquery通过name属性取值的简单实现方法
2016/06/20 Javascript
关于JS中的方法是否加括号的问题
2016/07/27 Javascript
学习vue.js表单控件绑定操作
2016/12/05 Javascript
jquery实现图片跟随鼠标的实例
2017/10/17 jQuery
vue自定义移动端touch事件之点击、滑动、长按事件
2018/07/10 Javascript
详解vue-cli官方脚手架配置
2018/07/20 Javascript
详解Vue基于vue-quill-editor富文本编辑器使用心得
2019/01/03 Javascript
Vue自定义全局弹窗组件操作
2020/08/11 Javascript
[02:47]DOTA2亚洲邀请赛 HR战队出场宣传片
2015/02/07 DOTA
python安装PIL模块时Unable to find vcvarsall.bat错误的解决方法
2016/09/19 Python
python实现用户管理系统
2018/01/10 Python
python函数式编程学习之yield表达式形式详解
2018/03/25 Python
python GUI库图形界面开发之PyQt5结合Qt Designer创建信号与槽的详细方法与实例
2020/03/08 Python
python上selenium的弹框操作实现
2020/07/13 Python
CSS3实现酷炫的3D旋转透视效果
2019/11/21 HTML / CSS
详解HTML5 data-* 自定义属性
2018/01/24 HTML / CSS
碧欧泉美国官网:Biotherm美国
2016/08/31 全球购物
美国著名的家居用品购物网站:Bed Bath & Beyond
2018/01/05 全球购物
银行优秀员工事迹材料
2014/05/29 职场文书
男性健康日的活动方案
2014/08/18 职场文书
小学生志愿者活动方案
2014/08/23 职场文书
前台岗位职责
2015/02/13 职场文书
原生JS实现飞机大战小游戏
2021/06/09 Javascript
mysql中DCL常用的用户和权限控制
2022/03/31 MySQL
Python字符串格式化方式
2022/04/07 Python