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 Beta Round #95 (Div. 2) D.Subway
题目链接:http://codeforces.com/problemset/problem/131/D 思路: 题目的意思是说给定一个无向图,求图中的顶点到环上顶点的最短距离(有且仅有一个环,并且环上 ...
- UIPopoverController 的使用
#import "ViewController.h" #import "RYColorSelectController.h" #import "RYM ...
- C++异常处理机制几种方法
一.异常 迄今为止,我们处理程序中的错误一般都是用if语句测试某个表达式,然后处理错误的特定义代码. C++异常机制使用了三个新的关键字 (SEH(结构化异常处理)) try ──标识可能出现 ...
- linux查看和修改系统时间
设置日期:date -s 20091112 设置时间:date -s 18:30:50 日期和时间一起设置: date 111218302009 (月日时分年) date -s "20091 ...
- C语言补码作用
补码主要是为了cpu运算器在进行减法运算时避免借位而设立的. 在早期,cpu中的运算器部分,只要实现一个加法器就可以完成四由算术运算. 因为计算机中的数值编码是有限位数的,所以减法实际上相当于加上减数 ...
- CentOS下vm虚拟机桥接联网
CentOS下vm虚拟机桥接联网 vm虚拟机下的桥接联网相当于虚拟机是一个独立的主机,直接与外网相连,这是比较好的连接方式,这样外网的机子就可以直接访问到虚拟机了. 首先虚拟机的联网方式设置为 ...
- 1.ARC和非ARC文件共存
1.ARC和非ARC文件共存 项目->Build Parses->对应的类 1.1.新项目兼容老的非ARC:-fno-objc-arc 1.2.老项目兼容ARC:-fobjc-arc
- [bzoj2118]墨墨的等式【dijk+堆】
10/30的update:如果是冲着dijk的板子来的,建议看多校联考contest中第二场day2的T2,那边的写法比较优秀... --------------------------------- ...
- JS运动基础
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- Javascript-jQuery【1】-用promise()实现html()回调函数
$('#divId').html(someText).promise().done(function(){ //your callback logic / code here });