offsetWidth、offsetHeight、offsetLeft、offsetTop
offsetWidth、offsetHeight:对象的宽度和高度
offsetLeft:返回距离上级盒子(最近的带有定位)左边的位置,从父级的padding开始算,不算border
offsetTop:如果父级都没有定位则以body 为准不存在offsetRight||offsetBottom!
EXAMPLE:筋斗云
<script>
var cloud = document.getElementById("cloud"); //背景
var nav = document.getElementById("nav");
var list = nav.children[1].children;
var current = 0; // 使用current暂时存贮
for(var i=0;i<list.length;i++){
list[i].onmousemove = function(){
target = this.offsetLeft;
}
list[i].onmouseout = function(){
target =current;
}
list[i].onclick = function(){
current = this.offsetLeft;
}
}
//缓动公式
var leader = 0,target = 0;
setInterval(function(){
leader = leader + (target-leader)/10;
cloud.style.left = leader+"px";
},30);
</script>
offsetParent
如果父亲没有定位,可以返回爷爷、增爷爷balabala,知道返回有定位的节点,而parentNode就是亲爹
offsetTop和style.top 的区别
- 最大区别:offsetLeft可以返回没有定位盒子的距离左侧的位置; style.top 不可以。只有定位的盒子 才有 left top right
- offsetTop 返回的是数字,而style.top返回的是字符串,除了数字外还带有单位:px。
style.left = 300px parseInt(300px) 结果 300 parseInt(style.left) +parseInt(style.left)- offsetTop可读不可改,style.top可以改
- 如果没有给HTML元素指定过 top 样式,则style.top 返回空字符串。
- 最重要的区别:style.left只能得到行内样式
事件对象
普通浏览器支持event 、ie 678 支持 window.event;兼容性写法如下:
document.onclick = function(event){
var event = event || window.event; // 兼容性写法
console.log(event.clientY);
}
event 常见属性
属性 | 作用 |
---|---|
data | 返回拖拽对象的URL字符串(dragDrop) |
width | 该窗口或框架的高度 |
height | 该窗口或框架的高度 |
pageX | 光标相对于该网页的水平位置(ie无) |
pageY | 光标相对于该网页的垂直位置(ie无) |
screenX | 光标相对于该屏幕的水平位置 |
screenY | 光标相对于该屏幕的垂直位置 |
target | 该事件被传送到的对象 |
type | 事件的类型 |
clientX | 光标相对于该网页的水平位置 (当前可见区域) |
clientY | 光标相对于该网页的水平位置 |
pageX clientX screenX 区别
screenX screenY:以电脑屏幕为基准点
clientX clientY:以文档为基准点 pageX
pageY:以可视区域为基准点
拖拽的原理
bar.onmousedown = function(event) {
document.onmousemove = function(event) {
}
document.onmouseup = function() {
document.onmousemove = null; // 弹起鼠标不做任何操作
}
}
防止选择拖动
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();