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系列属性 ——滚动
随机推荐
- "Project facet Java version 1.7 is not supported"的问题解决的办法
问题描述 在eclipse中,从SVN中检出project代码,拖拽式部署到local server中的时候,报出以下错误: 问题分析 问题产生的原因是,SVN中的代码是采用java 1.7开发编译的 ...
- loj 1036(dp)
题目链接:http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=25913 思路:易证存在一条从左上角到右下角的折线,沿着格子边缘的. ...
- 【java基础】]IO流
IO流 概念: 流的概念源于unix中管道(pipe)的概念,在unix中,管道是一条不间断的字节流,用来实现程序或进程间的通信,或读写外围设备,外部文件等 一个流,一定能够会有源和去向(目的地),他 ...
- 使用while代替for循环的几个习题
1:兔子问题 2:100以内质数的和 3:单位给发了一张150元购物卡,拿着到超市买三类洗化用品.洗发水15元,香皂2元,牙刷5元.求刚好花完150元,有多少种买法,没种买法都是各买几样? 总结:wh ...
- 【工具】Git
1.安装好Git以后,在开始菜单里找到Git->Git Bash,弹出一个命令窗口 2.设置邮箱 . 3.创建文件夹 4.创建版本库 5.将文件添加到缓存区中去 6.提交文件 7.检查是否还有文 ...
- WPD:Page Download Time Breakdown选项详解
WPD:Page Download Time Breakdown选项详解 “页面下载时间细分”图显示每个页面组件下载时间的细分,可以根据它确定在网页下载期间事务响应时间缓慢是由网络错误引起还是由服务器 ...
- linux安装配置SVN并设置钩子
安装说明 系统环境:CentOS-6.3安装方式:yum install (源码安装容易产生版本兼容的问题)安装软件:系统自动下载SVN软件 检查已安装版本 #检查是否安装了低版本的SVN 1 rpm ...
- psql-01基本介绍
安装与启动 安装: apt-get install postgresql / yum install postgresql.XXX; 启动: mac下直接打开 linux service postgr ...
- sql日期格式化
0 或 100 (*) 默认值 mon dd yyyy hh:miAM(或 PM) 1 101 美国 mm/dd/yyyy ...
- IComparer 指定排序。
public class NeEntityComparer : IComparer<NeEntity> { public int Compare(NeEntity x, NeEntity ...