在 JavaScript 中操作形式 dom 结点让其体育运动的这时候,经常会牵涉到各式各样收录机和边线座标等基本概念,假如无法较好地认知那些特性所代表者的象征意义,就无法认知js的体育运动基本原理,与此同时,虽然那些特性基本概念非常多,加之应用程序间。
与此同时实现形式相同,经常会导致基本概念混为一谈,历经科学研究后,这儿来展开两个归纳。
第三部份:DOM 第三类
1.1 黎贞特性
该特性指的是原素的IntelliTone部份长度和度,即 padding+content,假如没快捷形式,即为原素预设的度和长度,假如再次出现快捷形式,快捷形式会遮住原素的收录机,所以该特性是其原本收录机乘以快捷形式的收录机
CSS
HTML
js
结果:
原素原本预设为收录机都是 200,即IntelliTone部份收录机都是 200,但是虽然再次出现了垂直方向的快捷形式,占据了IntelliTone部份的长度,所以 clientWidth 变成了 183,而 clientHeight 依然是 200。
这一对特性指的是原素的 border+padding+content 的长度和度,该特性和其内部的内容是否超出原素大小无关,只和原本预设的 border 和 width 和 height 有关
CSS 和 HTML 部份同上,JS 部份如下:
最终结果:

可以看到该特性和 clientWidth 和 clientHeight 相比,多了预设的边框 border 的长度和度。
这一对特性是用来读取原素的border的长度和度的。
CSS
HTML
JavaScript
最终结果:

可以看到 div 的 border 被预设了 1px 的宽,这儿显示的是它的长度
说到这对特性就需要说下 offsetParent,所谓 offsetParent 指的是当前原素的离自己最近的具有定位的(position: absolute 或者 position: relative)父级原素(不仅仅指的是直接父级原素,只要是它的父原素都可以),该父级原素是当前原素的 offsetParent,假如从该原素向上寻找,找不到这样两个父级原素,所以当前原素的 offsetParent 是 body 原素。而 offsetLeft 和 offsetTop 指的是当前原素,相对于其 offsetParent 左边距离和上边距离,即当前原素的 border 到包含它的 offsetParent 的border的距离如下所示:
CSS
HTML
JavaScript
最终结果:

这儿让 div.two 相对定位,让 div.one 绝对定位,所以 div.two 是 one 的 offsetParent,与此同时,又给 div.one 加了两个 margin 为 20px,所以这儿它的 offsetTop 为 40,offsetLeft 原本为 0,但是加之 margin 为 20 后就变成了 20。
顾名思义,这两个特性指的是当原素内部的内容超出其长度和度的这时候,原素内部内容的实际长度和度,需要注意的是,当原素其中内容没超过其度或者长度的这时候,该特性是取不到的。
CSS
HTML
JavaScript
最终结果

尽管该 div 的收录机都是 100,但是其 scrollheight 为 234 显示的是其中内容的实际度,scrollWidth 为 83(虽然快捷形式占据了长度)
1.2 可读可写特性
所谓的可读可写特性指的是不仅能通过js
这对特性是可读写的,指的是当原素其中的内容超出其收录机的这时候,原素被卷起的度和长度。
css 和 html 部分同上,js 部份如下:
最终结果:

虽然拖动了快捷形式,scrollTop 的特性值一直在增大,而水平方向没快捷形式,所以 scrollLeft 一直为 0。
该特性还可以通过赋值内容自动滚动到某个边线,js 如下:
结果如下:

通过直接设定 div 的 scrollTop,让它直接显示在快捷形式在20垂直方向上20的边线。
对于两个 dom 原素,它的 style 特性返回的是两个第三类,这个第三类中的任意两个特性是可读写的。如 obj.style.top,obj.style.wdith 等,在读的这时候,他们返回的值经常是带有单位的(如px),与此同时,对于这种形式,
另一方面,那些特性能够被赋值,js体育运动的基本原理是通过不断修改那些特性的值而达到其边线改变的,需要注意的是,给那些特性赋值的这时候需要带单位的要带上单位,否则不生效。
第二部份 Event 第三类
在 js 中,对于原素的体育运动的操作形式通常都会牵涉到 event 第三类,而 event 第三类也存在很多边线特性,且虽然应用程序兼容性问题会导致那些特性间相互混为一谈,这儿一一讲解。
1)clientX 和 clientY,这对特性是当事件发生时,鼠标点击边线相对于应用程序(IntelliTone区)的座标,即应用程序左上角座标的(0,0),该特性以应用程序左上角座标为原点,计算鼠标点击边线距离其左上角的边线,
不管应用程序窗口大小如何变化,都不会影响点击边线的座标。
JS
结果:


screenX 和 screenY 是事件发生时鼠标相对于屏幕的座标,以设备屏幕的左上角为原点,事件发生时鼠标点击的地方即为该点的 screenX 和 screenY 值,如下所示:

可以看到尽管应用程序窗口被缩到很小,但是座标值却很大,因为是相对于屏幕座标而不是应用程序的座标。
这一对特性是指当事件发生时,鼠标点击边线相对于该事件源的边线,即点击该div,以该div左上角为原点来计算鼠标点击边线的座标,如下所示:

可以看到,点击该 div 的靠近左上角处,它的 offsetX 和 offsetY 为 1,0,需要注意的是,IE,chrome,opera 都支持该特性,唯独 Firefox 不支持该特性,FfsetX || event.layerX。
顾名思义,该特性是事件发生时鼠标点击边线相对于页面的边线,通常应用程序窗口没再次出现快捷形式时,该特性和 event.clientX 及 event.clientY 是等价的,但是当应用程序再次出现快捷形式的这时候,pageX 通常会大于 clientX,因为页面还存在被卷起来的部份的长度和度,如下所示:

虽然应用程序再次出现了垂直和水平的快捷形式,所以 pageX 和 pageY 大于 clientX 和 clientY。
当应用程序的快捷形式没被拖动或者应用程序没快捷形式的这时候,两者是相等的。
