scroll、offset和client的区别
整体布局：
<!DOCTYPE>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>比较</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
body{
margin: 0;
padding: 0;
width: 1500px;
height:2000px;
border: 1px solid;
}
div{
border: 1px solid;
left: 100px;
position: relative;
top: 100px;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div id="div1"></div>
</body>
</html>
1.clientX与clientY
window.onload=function(){
document.onclick=function(ev){
var oEvent=ev||event;
alert(oEvent.clientX+","+oEvent.clientY);
}
}
oEvent.clientX是指鼠标到可视区左边框的距离。
oEvent.clientY是指鼠标到可视区上边框的距离。
2.offsetWidth、offsetHeight、offsetLeft和offsetTop
window.onload=function(){
var oDiv=document.getElementById("div1");
alert(oDiv.offsetWidth);
alert(oDiv.offsetHeight);
alert(oDiv.offsetLeft);
alert(oDiv.offsetTop);
}
offsetWidth是指div的宽度（包括div的边框）
offsetHeight是指div的高度（包括div的边框）
offsetLeft是指div到整个页面左边框的距离（不包括div的边框）
offsetTop是指div到整个页面上边框的距离（不包括div的边框）
3.scrollTop、scrollLeft、scrollWidth和scrollHeight
scrollTop是指可视区顶部边框与整个页面上部边框的看不到的区域。
scrollLeft是指可视区左边边框与整个页面左边边框的看不到的区域。
scrollWidth是指左边看不到的区域加可视区加右边看不到的区域即整个页面的宽度（包括边框）
scrollHeight是指上边看不到的区域加可视区加右边看不到的区域即整个页面的高度（包括边框）
4.clientWidth、clientHeight、clientLeft和clientTop
clientWidth是指可视区的宽度。
clientHeight是指可视区的高度。
clientLeft获取左边框的宽度。
clientTop获取上边框的宽度。
5.如何兼容
if(document.compatMode == "BackCompat") {//渲染方式
wHeight = document.body.clientHeight;
}else {//"CSS1compat"
wHeight = document.documentElement.clientHeight;
}
scroll、offset和client的区别的更多相关文章
- offset 、 client 和 scroll - PC端网页特效
1.元素偏移量 offset 系列 1.1 offset 就是偏移量,使用 offset 系列相关属性可以 动态 得到该元素的位置(偏移).大小等. 注意: 1.获得元素距离带有定位父元素的位置 2 ...
- offset、client、scroll开头的属性归纳总结
HTML元素有几个offset.client.scroll开头的属性,总是让人摸不着头脑.在书中看到记下来,分享给需要的小伙伴.主要是以下几个属性: 第一组:offsetWidth,offsetHei ...
- client/scroll/offset width/height/top/left ---记第一篇博客
client/scroll/offset width/height/top/left (盒模型为contentBox,定位原点是元素左上角边框最外层的交点) clientWidth width+左p ...
- jQuery获得元素位置offset()和position()的区别
jQuery获得元素位置offset()和position()的区别 jQuery 中有两个获取元素位置的方法offset()和position(),这两个方法之间有什么异同 offset(): 获取 ...
- mov offset和lea的区别
mov offset和lea的区别 原文地址:https://www.cnblogs.com/fanzi2009/archive/2011/11/29/2267725.html 全局变量取地址用mo ...
- offset()与position()的区别
jQuery中有两个获取元素位置的方法offset()和position(),两者的定义如下: offset(): 获取匹配元素在当前视口的相对偏移. 返回的对象包含两个整形属性:top 和 left ...
- 第52天：offset家族、scroll家族和client家族的区别
一.offset家族 1.offsetWidth offsetHeight offsetLeft offsetTop offsetParent共同组成了offset家族,用来获取元素尺寸. offse ...
- JS中常用坐标offset、scroll、client的区别
在IE中scrollWidth:获取对象的滚动宽度scrollHeight: 获取对象的滚动高度.scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离scrollTop ...
- offset系列,client系列,scroll系列回顾
一 scroll系列属性 ——滚动
随机推荐
- Codeforces Round #333 (Div. 1) D. Acyclic Organic Compounds trie树合并
D. Acyclic Organic Compounds You are given a tree T with n vertices (numbered 1 through n) and a l ...
- 获取内核当前执行模块和当前发生异常地址和线程异常Handler调用步骤
循环每个内核模块 统计模块大小 判断触发异常的地址属于那个模块.来确定模块 获取发生异常地址 nt!_EXCEPTION_RECORD +0x000 ExceptionCode : -21391605 ...
- Java学习笔记（十）——多态
一.多态 1.对象的多种形态 (1)引用多态: 父类的引用可以指向本类的对象 父类的引用可以指向子类的对象 (2)方法多态: 创建本类对象时,调用的方法为本类方法: 创建子类对象时,调用的方法是子类方 ...
- 用ajax和js怎么做出滚动条滚到最下面分页
获取滚动条位置(scrollTop) 获取可视窗口高度(viewportHeight) 获取整个页面可滚动高度(scrollHeight) 当scrollTop+viewportHeight==scr ...
- Action处理请求参数
第一种 :Action 本身作为model对象,通过成员setter封装 (属性驱动 ) 第一种方式:<br> <form action="${pageContext.re ...
- 防止ViewPager和Fragment结合使用时候的数据预加载
不知道你们使用ViewPager和Fragment结合的时候发现一个问题没,如果你的每个Fragment都需要请求网络数据,并且你在请求网络数据的时候会加入进度对话框的加载显示效果,当你显示第一个Fr ...
- 一个linux的样本分析
不久前收到的一个linux样本,之前linux平台下的样本见得并不多,正好做个记录. 样本启动之后,会将自身重命名拷贝到/usr/bin下,并删除自身,如此处就将自身文件amdhzbenfi命名为us ...
- POJ 3080 后缀数组/KMP
题目链接:http://poj.org/problem?id=3080 题意:给定n个DNA串,求最长公共子串.如果最长公共子串的长度小于3时输出no significant commonalitie ...
- DOM--6 向应用程序中加入ajax
组合技术 适当的ajax时对已有技术和下列思想的组合 语义化(X)HTML标记 文档对象模型(DOM) JavaScript XML 不同浏览器中,公共XMLHttpRequest方法 open(me ...
- Windows64 系统下Python、NumPy与matplotlib 安装方法
今下午想用Python跑RNN网络,结果代码在导入包numpy时并没有报错,但是在用里面的函数时报错,因小编也是新手,只学习了Python的基础语法,并没有使用过第三方包,安装了一下午还没弄好,本以为 ...