来自 Web前端 2020-05-07 05:42 的文章
当前位置: 网上澳门金莎娱乐 > Web前端 > 正文

js中尺寸类样式网上澳门金莎娱乐

时间: 2019-09-02阅读: 156标签: 样式一:鼠标尺寸类样式都要事件对象的配合Tip:注意与浏览器及元素尺寸分开,鼠标类尺寸样式都是X,Y,浏览器及元素的各项尺寸时Height,Width1:检测相对于浏览器的位置:event.clientX/event.clientY

1.  clientX,pageX,offsetX,screenX的区别:

client:整个浏览器的可视区域,当点击鼠标的时候,鼠标事件发生的位置距离浏览器可视区域的左边和上边的距离clientX:鼠标事件发生的位置距离浏览器可视区域的左边的距离clientY:鼠标事件发生的位置距离浏览器可视区域的上边的距离

event.clientX、event.clientY

2:检测相对于屏幕的位置event.screenX/event.screenY

鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性

screen:整个屏幕的大小,当鼠标点击的时候,鼠标事件发生的位置相对于屏幕的左边和上边的距离event.screenX:鼠标事件发生的位置距离屏幕左边的距离event.screenY:鼠标事件发生的位置距离屏幕上边的距离

event.pageX、event.pageY

3:检测相对于事件源的位置:event.offsetX/event.offsetY

类似于event.clientX、event.clientY,但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性,但得到了广泛支持。IE事件中没有这2个属性。

Tip:注意这个事件源的模型,offset的检测是不包括边框的大小的,但是包括内边距,如果边框的大小为10px,那么最左边的X的距离为-10;

event.offsetX、event.offsetY

offset:相对于事件源,当鼠标事件发生时,相对于发生事件的事件源的左边的距离和上边的距离event.offsetX:当鼠标事件发生时,相对于发生事件的事件源的左边的距离event.offsetY:当鼠标事件发生时,相对于发生事件的事件源的上边的距离

鼠标相对于事件源元素(srcElement)的X,Y坐标,只有IE事件有这2个属性,标准事件没有对应的属性。

4:检测相对于文档的位置:event.pageX/event.pageY

event.screenX、event.screenY

Tip:这个文档指的这个页面,页面在不发生滚动的情况下,浏览器的可视区域等于文档的可视区域,这个时候event.clientX = event.offetX

鼠标相对于用户显示器屏幕左上角的X,Y坐标。标准事件和IE事件都定义了这2个属性

网上澳门金莎娱乐,一旦页面发生了滚动,那么滚动消失的距离,page是可以检测来的,这时候event.cientX 与 event.pageX的距离是不相等的

网上澳门金莎娱乐 1

page:页面文档,当页面发生了滚动的,早上文档顶部隐藏了一部分,pageX的距离还是从文档最顶的距离开始检测的pageX:当鼠标事件发生时,鼠标相对于文档左边的位置(IE7,8没有)pageY:当鼠标事件发生时,鼠标相对于文档上边的位置(IE7,8没有)

 

二:浏览器及元素各项尺寸offsetParent:获取元素的最近的具有定位属性的父元素1:元素.offsetWidth/元素.offsetHeight:元素的实际宽高

 

Tip:元素的实际宽高是包括边框的,指的是这个元素的全部


offset:针对元素的offsetWidth:元素的宽度offsetHight:元素的高度

clientLeft,clientTop:表示内容区域的左上角相对于整个元素左上角的位置(包括边框)。(取决于边框的像数值?)

本文由网上澳门金莎娱乐发布于Web前端,转载请注明出处:js中尺寸类样式网上澳门金莎娱乐

关键词: