美文网首页
offset家族与常用事件对象小结

offset家族与常用事件对象小结

作者: xiaotao123 | 来源:发表于2017-05-01 00:58 被阅读41次

offset家族

offset自己的

目的:js中有一套方便的获取元素尺寸的办法就是offset家族;

1.1.1offsetWidthoffsetHeight

得到对象的宽度和高度(自己的,与他人无关)

offsetWidth=width+ border+padding

div {width:220px;border-left:2px solid red; padding:10px;}

div.offsetWidth =220 + 2 + 20

为什么不用div.style.width因为东西只能得到行内的数值

1.1.2offsetLeftoffsetTop

返回距离上级盒子(最近的带有定位)左边的位置

如果父级都没有定位则以body为准

这里的父级指的是所有上一级不仅仅指的是父亲还可以是爷爷曾爷爷曾曾爷爷。。。。

.

offsetLeft

从父级的padding开始算父亲的border不算

总结一下:就是子盒子到定位的父盒子边框到边框的距离

1.1.3offsetParent

返回改对象的父级(带有定位)不一定是亲的爸爸

前面学过一个返回父亲(亲的)parentNode有所区别

如果当前元素的父级元素没有进行CSS定位(position为absolute或relative),offsetParent为body。

2、如果当前元素的父级元素中有CSS定位(position为absolute或relative),offsetParent取最近的那个父级元素。

varson =document.getElementById("son");

//alert(son.parentNode.id);

alert(son.offsetParent.tagName);// tagName标签的名字

1.1.4offsetTop style.top的区别

一、最大区别在于offsetLeft可以返回没有定位盒子的距离左侧的位置。而style.top不可以只有定位的盒子才有lefttop right

二、offsetTop返回的是数字,而style.top返回的是字符串,除了数字外还带有单位:px。

style.left = 300pxparseInt(300px)结果300

parseInt(style.left)+ parseInt(style.left)

三、offsetTop只读,而style.top可读写。

四、如果没有给HTML元素指定过top样式,则style.top返回的是空字符串。

五、最重要的区别style.left只能得到行内样式offsetLeft随便

1.2事件对象

我们学过一些事件:onmouseoveronmouseoutonclick .....

btn.onclick =function(event) {语句}

event单词翻译过来事件的意思

event就是事件的对象指向的是事件是onclick

再触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息。所有浏览器都支持event对象,但支持的方式不同。

比如鼠标操作时候,会添加鼠标位置的相关信息到事件对象中。

普通浏览器支持event

ie 678支持window.event

所以我们采取兼容性的写法:

varevent=event||window.event;

1.2.1event常见属性

属性

作用

data

返回拖拽对象的URL字符串(dragDrop)

width

该窗口或框架的高度

height

该窗口或框架的高度

pageX

光标相对于该网页的水平位置(ie无)

pageY

光标相对于该网页的垂直位置(ie无)

screenX

光标相对于该屏幕的水平位置

screenY

光标相对于该屏幕的垂直位置

target

该事件被传送到的对象

type

事件的类型

clientX

光标相对于该网页的水平位置(当前可见区域)

clientY

光标相对于该网页的水平位置

1.2.2pageXclientXscreenX区别

screen XscreenY

是以我们的电脑屏幕为基准点测量

pageXpageY

以我们的文档(绝对定位)的基准点对齐

ie678不认识

clientXclientY

以可视区域为基准点类似于固定定位

1.3常用事件

onmouseoveronmouseoutonclick

onmousemove当鼠标移动的时候就是说,鼠标移动一像素就会执行的事件

div.onmousemove

= function() {语句}

当鼠标再div身上移动的时候,就会执行。

得到在某个盒子内的坐标:

div.onmouseover和div.onmousemove区别

他们相同点都是经过div才会触发

div.onmouseover只触发一次

div.onmousemove每移动一像素,就会触发一次

onmouseup当鼠标弹起

onmousedown当鼠标按下的时候

1.拖动原理==鼠标按下接着移动鼠标。

bar.onmousedown =function(){

document.onmousemove = function(){

}

}

2.当我们按下鼠标的时候,就要记录当前鼠标的位置-大盒子的位置

算出bar当前在大盒子内的距离。

相关文章

网友评论

      本文标题:offset家族与常用事件对象小结

      本文链接:https://www.haomeiwen.com/subject/dqjxtxtx.html