client/offset/srooll位置与关系
2016-07-27 13:12
405 查看
<!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视图属性
1、innerWidth 属性和innerHeight 属性 例如innerWidth表示获取window窗体的内部宽度,不包括用户界面元素,比如窗框
2、outerWidth属性和outerHeight属性 例如outerWidth/outerHeight表示整个浏览器窗体的大小,包括任务栏等 3、pageXOffset和pageYOffset 表示整个页面滚动的像素值(水平方向的和垂直方向的
screenX and screenY 距离屏幕的高度和宽度
二、Screen视图属性 1. availWidth和availHeight 显示器可用宽高,不包括任务栏之类 avail 英 [əˈveɪl] 美 [əˈvel]
2. colorDepth
3.pixelDepth 该属性基本上与colorDepth一样 4. width和height 表示显示器屏幕的宽高。
三、元素视图属性1. clientLeft和clientTop
2. clientWidth和clientHeight 表示内容区域的高度和宽度,包括padding大小,但是 3.offsetLeft和offsetTop 表示相对于最近的祖先定位元素(CSS position 属性被设置为的左右偏移值
偏移距离时相对于html文档左上角的偏移值
4.offsetWidth和offsetHeight 整个元素的尺寸(包括边框)
5、scrollLeft和scrollTop 表示元素滚动的像素大小。可读可写。
五、鼠标位置(Mouse position)
1. 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; };
相关文章推荐
- 知识积累:CA详解
- 关于javascript中=的返回值
- 解决ActionBar字体设置
- Activity启动另一个Activity的方式总结
- 【redux】Action Reducer Store
- 报错:1130-host ... is not allowed to connect to this MySql server 开放mysql远程连接 不使用localhost
- Oracle 11G在用EXP 导出时,空表不能导出解决
- vs中添加界面皮肤
- Linux命令(19)用户权限管理:chown
- 通过Python使用树莓派的GPIO[未完待续...]
- iOS UIWebView 的加载
- Drawable、Bitmap、byte[]之间的转换
- iOS - 大文件下载(task and session)
- windows 任务计划失败 返回值
- 服务器架构及实战(架构篇)- PHP建站
- caffe 试运行MNIST
- Android TextView 不同主题下两边对齐
- Maven常用
- 关于OleDB连接Excel的Extended Properties(扩展属性)HDR=YES; IMEX=2个人理解心得
- 读懂 Linux中的 diff