offset 部分
offset 自己的
目的:js 中有一套方便的获取元素尺寸的方法就是offset
常用:
offsetWidth offsetHeight
得到对象的宽度和高度(自己的,与他人无关)
offsetWidth = width+border +padding
例如:
div{ width:220px ; border-left:2px solid red; padding: 10px;}
div.offsetWidth=22
0....0+2+20
offsetLeft offsetTop
返回距离上级盒子(带有定位)左边的位置
如果父级都没有定位则以body 为准
这里的父级指的是所有上一级 不仅仅所指父类
offsetLeft 从父类的padding 开始算 父类border 不算
总之:子类容器到被定位的符类容器边框到边框的距离
offsetParent
返回对象父级(带有定位)
如果当期元素的父级元素没有进行css 定位(position 为 absolute 或者 relative),offsetParent 为body
反之,如果当期元素的父级元素有ss 定位(position 为 absolute 或者 relative),offsetParent取最近的那个父级元素
offsetTop 与 style.top 的区别
最大的区别在于 offsetLeft 可以返回没有定位盒子的距离左侧的位置,而style.top 不可以
只有定位的容器才有left top right
offsetTop 返回的是数字,而style.top 返回的是字符串,除了数字外还有带单位:px
事件以及对象
btn.οnclick=function(event){语句}
event :就是事件的意思
event 的常见属性
var event=event||window.event;//兼容写法
console.log(event.clientX);
console.log(event.clientY);
data | 返回拖拽对象的URL字符串(dragDrop) |
width | 该窗口或框架的高度 |
height | 该窗口或框架的高度 |
pageX | 光标相对于该网页的水平位置(ie无) |
pageY | 光标相对于该网页的垂直位置(ie无) |
screenX | 光标相对于该屏幕的水平位置 |
screenY | 光标相对于该屏幕的垂直位置 |
target | 该事件被传送到的对象 |
type | 事件的类型 |
clientX | 光标相对于该网页的水平位置 (当前可见区域) |
clientY | 光标相对于该网页的水平位置 |
pageX clientX screenX 的区别
screenX ,screenY
是以电脑屏幕为基准点 测量
pageX pageY (ie678 不兼容)
以我们的文档(局对定位)的基准点对其
clientX cilent Y
以可视区域为基准点 类似于 相对定位
onmouseup 当鼠标弹起
onmousedown 当鼠标按下
防止选择拖动 过界
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();