client/offset/srooll位置与关系
<!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;
};
client/offset/srooll位置与关系的更多相关文章
- DOM盒模型和位置 client offset scroll 和滚动的关系
DOM盒模型和位置 client offset scroll 和滚动的关系 概览 在dom里面有几个描述盒子位置信息的值, pading border margin width height clie ...
- JavaScript位置:window&client&offset&scroll&MouseEvent&getBoundingClientRect&计算任意元素滚动条宽度
Window: window.innerWidth:浏览器viewport视口宽,包括垂直滚动条 window.innerHeight:浏览器视口高,包括水平滚动条 window.outerWidth ...
- JavaScript概念之screen/client/offset/scroll/inner/avail的width/left 分类: JavaScript HTML+CSS 2015-05-27 16:42 635人阅读 评论(0) 收藏
原文地址:http://caibaojian.com/js-name.html JS中获取各种宽度和距离,常常让我们混淆,各种浏览器的不兼容让我们很头疼,现在就在说说js中有哪些宽度和距离. 1.名词 ...
- page,client,offset区别
offset:相对于当前“盒子”的距离 ,与滚动条无关 client:相对于可视区域的距离,与滚动条无关 page:相对于整个页面的距离,与滚动条有关 示例代码: <!DOCTYPE html& ...
- kafka 消费者offset记录位置和方式
我们大家都知道,kafka消费者在会保存其消费的进度,也就是offset,存储的位置根据选用的kafka api不同而不同. 首先来说说消费者如果是根据javaapi来消费,也就是[kafka.jav ...
- JS中client/offset/scroll等的宽高解析
原文地址:→传送门 window相关宽高属性 1. window.outerHeight (窗口的外层的高度) / window.outerWidth (窗口的外层的宽度) window.outerH ...
- client , offset , scroll 系列 及百度导航栏案例
1. client 系列 示例 : <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...
- client,offset,scroll系列
client(客户端),offset(偏移),scroll(滚动)1.client系列 clientTop 内容区域到边框顶部的距离 ,说白了,就是边框的高度 clientLeft 内容区域到边框左部 ...
- JS-特效 ~ 04. client对象、网页可视区域的宽高、client / offset / scroll 三大家族的区别、冒泡事件、事件委托、获取内嵌式和外链式属性getStyle(ele,attr) ;、缓动动画封装
知识点: 模拟滚动条的解除事件问题 : event内置对象,包含 了大量事件: page兼容性: pageX || clientX + scool().top : if (true === a)tr ...
随机推荐
- SQL order 排序
select * from emp;
- 20145207 《Java程序设计》第8周学习总结
前言: 这两天电路焊小车,有意思归有意思,确实挺忙的.博客到现在才写.执勤看的东西忘得好快呀,莫名的记不住.不说废话了,开始. 教材学习内容总结: 一.NIO和NIO2 1.NIO的定义 InputS ...
- [转] HashMap和HashSet的区别
HashMap和HashSet的区别是Java面试中最常被问到的问题.如果没有涉及到Collection框架以及多线程的面试,可以说是不完整.而Collection框架的问题不涉及到HashSet和H ...
- Python学习总结17:exec和eval执行求值字符串
有些时候可能会需要动态地创造Python代码,然后将其作为语句执行或作为表达式计算. 1. exec >>>exec "print 'Hello, world!'" ...
- 数组有没有length()这个方法? String有没有length()这个方法?
答:数组和string都没有Length()方法,只有Length属性.
- jsp页面中的java代码
jsp页面中的java代码 1.jsp表达式 <%= ....%> 只能放置一个变量常量 2. jsp小脚本 <% .... %> java语句,可以插入一些语句 3. ...
- MYSQL日期类型的加减更新使用INTERVAL 1 DAY
例如:UPDATE teachingplan SET teachPlanBeginTime = teachPlanBeginTime +INTERVAL 1 DAY
- VMware搭建 sql server2012集群加节点 KB953748
--node4加入节点前 将共享磁盘挂载到node4,仅测试验证磁盘挂载,否则会导致整个集群磁盘offline切换 --node4 加入集群报错,无法访问计算机“node4” 0.public网卡勾选 ...
- PHP 文件上传的综合实例
1.upload.php <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <htm ...
- cvLoadImage函数解析 cvLoadImageM()函数
1.函数原型:IplImage* cvLoadImage( const char* filename, int flags=CV_LOAD_IMAGE_COLOR ); filename :要被读入的 ...