<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.id{
margin: 10px;
border: 5px solid red;
top: 40px;
width: 300px;
height:300px;
}
.jj{
margin: 10px;
border: 50px solid blue;
top: 40px;
width: 200px;
height: 200px;
overflow: scroll;
}
p{
height: 20px;
}
</style>
<body>
<div class="id" id="is">
<div class="jj" id="jj">
<p>水电费水电费是</p>
<p>水电费水电费是</p>
<p>水电费水电费是</p>
<p>水电费水电费是</p>
<p>水电费水电费是</p>
<p>水电费水电费是</p>
<p>水电费水电费是</p>
<p>水电费水电费是</p>
<p>水电费水电费是</p>
<p>水电费水电费是</p>
<p>水电费水电费是</p>
<p>水电费水电费是</p>
<p>水电费水电费是</p>
<p>水电费水电费是</p>
<p>水电费水电费是</p>
<p>水电费水电费是</p><p>水电费水电费是</p><p>水电费水电费是</p>
</div>
</div>
</body>
<script src="//cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>
</html>
一、Window视图属性
、innerWidth 属性和innerHeight 属性
例如innerWidth表示获取window窗体的内部宽度，不包括用户界面元素，比如窗框
_getViewHeight = function () { var _viewHeight = 0;
if( typeof window.innerHeight !== 'undefined' ){
_viewHeight = window.innerHeight;
}
else if(typeof document.compatMode !== 'undefined' && document.compatMode !== "BackCompt"){
_viewHeight = document.documentElement.clientHeight;
}
else{
_viewHeight = document.body.clientHeight;
}
return _viewHeight;
};
、outerWidth属性和outerHeight属性
例如outerWidth/outerHeight表示整个浏览器窗体的大小，包括任务栏等
、pageXOffset和pageYOffset
表示整个页面滚动的像素值（水平方向的和垂直方向的
screenX and screenY
距离屏幕的高度和宽度
二、Screen视图属性 . availWidth和availHeight
显示器可用宽高，不包括任务栏之类 avail 英 [əˈveɪl] 美 [əˈvel]
. colorDepth
3.pixelDepth
该属性基本上与colorDepth一样 . width和height
表示显示器屏幕的宽高。
三、元素视图属性1. clientLeft和clientTop
. clientWidth和clientHeight
表示内容区域的高度和宽度，包括padding大小，但是 .offsetLeft和offsetTop 表示相对于最近的祖先定位元素（CSS position 属性被设置为的左右偏移值
偏移距离时相对于html文档左上角的偏移值
.offsetWidth和offsetHeight
整个元素的尺寸（包括边框）
5、scrollLeft和scrollTop
表示元素滚动的像素大小。可读可写。
五、鼠标位置(Mouse position)
-
. clientX,clientY
相对于window，为鼠标相对于window的偏移 event.clientX event.clientY screenX, screenY
鼠标相对于显示器屏幕的偏移坐标
event.clientX、event.clientY 鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性 event.pageX、event.pageY 类似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性，但得到了广泛支持。IE事件中没有这2个属性。 event.offsetX、event.offsetY 鼠标相对于事件源元素（srcElement）的X,Y坐标，只有IE事件有这2个属性，标准事件没有对应的属性。 event.screenX、event.screenY 鼠标相对于用户显示器屏幕左上角的X,Y坐标。标准事件和IE事件都定义了这2个属性
六、jquery的位置
position()
获取匹配元素相对父元素的偏移。
返回的对象包含两个整型属性：top 和 left。为精确计算结果，请在补白、边框和填充属性上使用像素单位。此方法只对可见元素有效。
scrollTop([val])
概述
获取匹配元素相对滚动条顶部的偏移。
此方法对可见和隐藏元素均有效。
Draw.prototype.getAbsoluteLeft = function (_e) {
var _left = _e.offsetLeft,
_current = _e.offsetParent;
while(_current !== null){
_left += _current.offsetLeft;
_current = _current.offsetParent;
}
return _left;
};
/**
* 获取元素的绝对顶部坐标
* @param _e 需要获取的元素dom对象
* @returns {number|Number}
*/
Draw.prototype.getAbsoluteTop = function (_e) {
var _top = _e.offsetTop,
_current = _e.offsetParent;
while(_current !== null){
_top += _current.offsetTop;
_current = _current.offsetParent;
}
return _top;
};
/**
* 获取元素的鼠标的位置
* @param _e
* @returns {{}}
*/
Draw.prototype.getMousePoint = function(_e){
var body = document.body,
_left = 0,
_top = 0;
if(typeof window.pageXOffset != 'undefined'){
_left = window.pageXOffset;
_top = window.pageYOffset;
}
else if(typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat'){
_left = document.documentElement.scrollLeft;
_top = document.documentElement.scrollTop;
}
else {
_left = body.offsetLeft;
_top = body.offsetTop;
}
_left += _e.clientX;
_top += _e.clientY;
this._mousepos.left = _left;
this._mousepos.top = _top;
return this._mousepos;
};
