js中的scroll和offset 的使用比较

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>

上面就是自己测试用的代码，可以直接拿来测试。

转载于:https://www.cnblogs.com/IT-Monkey/p/3345885.html

js中的scroll和offset 的使用比较相关推荐

原生JS中的三大家族（offset/scroll/client）与jQuery中对应的方法
JS中的offset家族: 一.offsetEWidth与offsetHeight: 获取的是元素的实际宽高 = width + border + padding 注意点: 1.可以获取行内及内嵌的宽 ...
python 全栈开发，Day54(关于DOM操作的相关案例，JS中的面向对象，定时器，BOM，client、offset、scroll系列)...
04-jQuery的属性操作 jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作 html属性操作:是对html文档中的属性进行读取,设置和移除操作.比如at ...
js中的offset函数和position
js中的offset函数,其本身是个对象,它含有两个属性,top和left,其属性值是数字,无单位,是针对文档内容的,即浏览器而position函数,也有上述两个属性,但它是针对父元素的偏移量转载 ...
js中scroll滚动相关
js中scroll滚动相关 scroll,滚动,一般讨论的是网页整体与浏览器之间的关系. 一.元素相关属性/方法解释 element.scrollHeight 返回元素的整体高度. element ...
onscroll事件没有响应的原因以及vue.js中添加onscroll事件监听的方法(vue上监听scroll事件
在vue.js中直接使用onscroll不起作用利用DOM二级监听事件即可, window.addEventListener('scroll',()=>{console.log(window. ...
JavaScript基础（3）-JS中的面向对象、定时器、BOM、位置信息
一.创建对象的几种常用方式. 1.使用Object或对象字面量创建对象: a.使用Object()内置的构造函数来创建对象,例如: var student = new Object(); // 创建一 ...
JS中DOM是什么、DOM的基本操作、DOM操作盒子模型的13个api——大总结（附源码）
文章目录一,什么是DOM? 二,DOM的具体用途及发展史? 1,操作元素 2,操作属性 3,操作文本三,JS操作盒子模型需要的13个api 一,什么是DOM? DOM:Document Objec ...
JS中clientHeight、scrollHeight和offsetHeight的大坑，滚动条抖动问题解决
JS中clientHeight.scrollHeight和offsetHeight的大坑,滚动条抖动问题解决 1.什么是clientHeight.scrollHeight和offsetHeight 1 ...
三大家族scroll、offset、client
三大家族scroll.offset.client JS的三大家族主要是Offset.Scroll.Client,通过对三大家族不同属性的灵活使用,我们可以模拟出很多炫酷的JS动画,增强界面的视觉感染力 ...

js中的scroll和offset 的使用比较

js中的scroll和offset 的使用比较相关推荐

最新文章

热门文章