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系列属性 ——滚动
随机推荐
- AChartEngine使用View显示图表
学习过AChartEngine的人肯定都知道,使用ChartFactory创建一张图表可以使用Intent方法,之后调用StartActivity来启用这个Intent,但是这么左右一个坏处,就是当你 ...
- java jdbc sqlhelper
package com.shop.util; import java.sql.*; //SqlHelper类 //定义了数据库连接函数,关闭查询结果集,关闭Statement对象,关闭数据库连接 // ...
- 如何在Crystal Portlet中正确返回JSON数据给AJAX请求？
当Crystal Portlet中需要采用Ajax请求,并让后台返回Json数据时,如何才能正确.方便的返回Json数据呢? 以下两种方法均可: 方法一:Ajax请求时,采用RenderURL,对应P ...
- Laravel系列 目录结构
Where Is The Models Directory? app directory by default 其中 app:,core code of your application, almos ...
- js 事件监听
addEventListener() 方法 element.addEventListener(event, function, useCapture); 第一个参数是事件的类型 (如 "cl ...
- C++11 std::chrono库详解
所谓的详解只不过是参考www.cplusplus.com的说明整理了一下,因为没发现别人有详细讲解. chrono是一个time library, 源于boost,现在已经是C++标准.话说今年似乎又 ...
- jQuery-事件以及动画
事件: 1.//方法1 $(window).load(function(){ }) window.onload=function(){ } //方法2 function one(){ alert(&q ...
- CSS3-给网页添加图片
给网页添加图片: 1.background-attachment: scroll--------随文本一块滚动 ; background-attachment: fixed-----固定在一个位置上 ...
- (转)POJ题目分类
初期:一.基本算法: (1)枚举. (poj1753,poj2965) (2)贪心(poj1328,poj2109,poj2586) (3)递归和分治法. (4)递推. ...
- 解决Ue4C++使用UMG之类的模块时出现的拼写错误
在cs文件中加入UMG模块后,在项目文件上右键生成项目文件即可解决