JavaScript 中的各种宽高以及位置总结

2023-05-27 0 666

在 JavaScript 中操作形式 dom 结点让其体育运动的这时候,经常会牵涉到各式各样收录机和边线座标等基本概念,假如无法较好地认知那些特性所代表者的象征意义,就无法认知js的体育运动基本原理,与此同时,虽然那些特性基本概念非常多,加之应用程序间。

与此同时实现形式相同,经常会导致基本概念混为一谈,历经科学研究后,这儿来展开两个归纳。

第三部份:DOM 第三类

1.1 黎贞特性

1)clientWidth 和 clientHeight

该特性指的是原素的IntelliTone部份长度和度,即 padding+content,假如没快捷形式,即为原素预设的度和长度,假如再次出现快捷形式,快捷形式会遮住原素的收录机,所以该特性是其原本收录机乘以快捷形式的收录机

CSS

<style> .one{ width: 200px; height: 200px; background: red; border: 1px solid #000000; overflow: auto; } </style>

HTML

<body><div class=”one”> javascript高阶应用领域<br> javascript高阶应用领域<br> javascript高阶应用领域<br> javascript高阶应用领域<br> javascript高阶应用领域<br> javascript高阶应用领域<br> javascript高阶应用领域<br> javascript高阶应用领域<br> javascript高阶应用领域<br> javascript高阶应用领域<br> javascript高阶应用领域<br> javascript高阶应用领域<br> javascript高阶应用领域<br> javascript高阶应用领域<br> javascript高阶应用领域<br> javascript高阶应用领域<br> javascript高阶应用领域<br> javascript高阶应用领域<br></div></body>

js

<script> window.onload=function(){ var oDiv=document.getElementsByTagName(div)[0]; console.log(oDiv.clientWidth+”:”+oDiv.clientHeight); } </script>

结果:

原素原本预设为收录机都是 200,即IntelliTone部份收录机都是 200,但是虽然再次出现了垂直方向的快捷形式,占据了IntelliTone部份的长度,所以 clientWidth 变成了 183,而 clientHeight 依然是 200。

2)offsetWidth 和 offsetHeight

这一对特性指的是原素的 border+padding+content 的长度和度,该特性和其内部的内容是否超出原素大小无关,只和原本预设的 border 和 width 和 height 有关

CSS 和 HTML 部份同上,JS 部份如下:

<script> window.onload=function(){ var oDiv=document.getElementsByTagName(div)[0]; console.log(oDiv.offsetWidth+”:”+oDiv.offsetHeight); } </script>

最终结果:

JavaScript 中的各种宽高以及位置总结

可以看到该特性和 clientWidth 和 clientHeight 相比,多了预设的边框 border 的长度和度。

3)clientTop 和 clientLeft

这一对特性是用来读取原素的border的长度和度的。

CSS

<style> body{ border: 2px solid #000000; } .one{ border: 1px solid red; width: 100px; height: 100px; background: red; } </style>

HTML

<body><div class=”one”></div></body>

JavaScript

<script> var oDiv=document.getElementsByClassName(one)[0]; console.log(oDiv.clientLeft+”:”+oDiv.clientTop);</script>

最终结果:

JavaScript 中的各种宽高以及位置总结

可以看到 div 的 border 被预设了 1px 的宽,这儿显示的是它的长度

4)offsetLeft 和 offsetTop

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

CSS

<style> .two{ position: relative; width: 200px; height: 200px; border: 1px solid green; } .one { width: 100px; height: 100px; background: red; margin: 20px; border: 1px solid #000000; position: absolute; top:20px; } </style>

HTML

<body><div class=”two”><div class=”one”></div></div></body>

JavaScript

<script> var oDiv=document.querySelector(.one); console.log(oDiv.offsetTop+”:”+oDiv.offsetLeft);</script>

最终结果:

JavaScript 中的各种宽高以及位置总结

这儿让 div.two 相对定位,让 div.one 绝对定位,所以 div.two 是 one 的 offsetParent,与此同时,又给 div.one 加了两个 margin 为 20px,所以这儿它的 offsetTop 为 40,offsetLeft 原本为 0,但是加之 margin 为 20 后就变成了 20。

5)scrollHeight 和 scrollWidth

顾名思义,这两个特性指的是当原素内部的内容超出其长度和度的这时候,原素内部内容的实际长度和度,需要注意的是,当原素其中内容没超过其度或者长度的这时候,该特性是取不到的。

CSS

<style> .one{ width: 100px; height: 100px; overflow: auto; } </style>

HTML

<body><div class=”one”> 我是内容<br> 我是内容<br> 我是内容<br> 我是内容<br> 我是内容<br> 我是内容<br> 我是内容<br> 我是内容<br> 我是内容<br> 我是内容<br> 我是内容<br> 我是内容<br> 我是内容<br></div></body>

JavaScript

<script> var oDiv=document.querySelector(.one); oDiv.onscroll=function(){ console.log(this.scrollHeight+”:”+this.scrollWidth); }</script>

最终结果

JavaScript 中的各种宽高以及位置总结

尽管该 div 的收录机都是 100,但是其 scrollheight 为 234 显示的是其中内容的实际度,scrollWidth 为 83(虽然快捷形式占据了长度)

1.2 可读可写特性

所谓的可读可写特性指的是不仅能通过js

1)scrollTop 和 scrollLeft

这对特性是可读写的,指的是当原素其中的内容超出其收录机的这时候,原素被卷起的度和长度。

css 和 html 部分同上,js 部份如下:

<script> var oDiv=document.querySelector(.one); oDiv.onscroll=function(){ console.log(this.scrollTop+”:”+this.scrollLeft); }</script>

最终结果:

JavaScript 中的各种宽高以及位置总结

虽然拖动了快捷形式,scrollTop 的特性值一直在增大,而水平方向没快捷形式,所以 scrollLeft 一直为 0。

该特性还可以通过赋值内容自动滚动到某个边线,js 如下:

<script> var oDiv=document.querySelector(.one); oDiv.scrollTop=20; oDiv.onscroll=function(){ console.log(this.scrollTop+”:”+this.scrollLeft); }</script>

结果如下:

JavaScript 中的各种宽高以及位置总结

通过直接设定 div 的 scrollTop,让它直接显示在快捷形式在20垂直方向上20的边线。

2)obj.style.* 特性

对于两个 dom 原素,它的 style 特性返回的是两个第三类,这个第三类中的任意两个特性是可读写的。如 obj.style.top,obj.style.wdith 等,在读的这时候,他们返回的值经常是带有单位的(如px),与此同时,对于这种形式,

另一方面,那些特性能够被赋值,js体育运动的基本原理是通过不断修改那些特性的值而达到其边线改变的,需要注意的是,给那些特性赋值的这时候需要带单位的要带上单位,否则不生效。

第二部份 Event 第三类

在 js 中,对于原素的体育运动的操作形式通常都会牵涉到 event 第三类,而 event 第三类也存在很多边线特性,且虽然应用程序兼容性问题会导致那些特性间相互混为一谈,这儿一一讲解。

1)clientX 和 clientY,这对特性是当事件发生时,鼠标点击边线相对于应用程序(IntelliTone区)的座标,即应用程序左上角座标的(0,0),该特性以应用程序左上角座标为原点,计算鼠标点击边线距离其左上角的边线,

不管应用程序窗口大小如何变化,都不会影响点击边线的座标。

JS

<script> var oDiv=document.querySelector(.one); oDiv.onclick=function(ev){ var evt=ev||event; console.log(evt.clientX+”:”+evt.clientY); }</script>

结果:

JavaScript 中的各种宽高以及位置总结
JavaScript 中的各种宽高以及位置总结
2)screenX 和 screenY

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

JavaScript 中的各种宽高以及位置总结

可以看到尽管应用程序窗口被缩到很小,但是座标值却很大,因为是相对于屏幕座标而不是应用程序的座标。

3)offsetX 和 offsetY

这一对特性是指当事件发生时,鼠标点击边线相对于该事件源的边线,即点击该div,以该div左上角为原点来计算鼠标点击边线的座标,如下所示:

JavaScript 中的各种宽高以及位置总结

可以看到,点击该 div 的靠近左上角处,它的 offsetX 和 offsetY 为 1,0,需要注意的是,IE,chrome,opera 都支持该特性,唯独 Firefox 不支持该特性,FfsetX || event.layerX。

4)pageX 和 pageY

顾名思义,该特性是事件发生时鼠标点击边线相对于页面的边线,通常应用程序窗口没再次出现快捷形式时,该特性和 event.clientX 及 event.clientY 是等价的,但是当应用程序再次出现快捷形式的这时候,pageX 通常会大于 clientX,因为页面还存在被卷起来的部份的长度和度,如下所示:

JavaScript 中的各种宽高以及位置总结

虽然应用程序再次出现了垂直和水平的快捷形式,所以 pageX 和 pageY 大于 clientX 和 clientY。

当应用程序的快捷形式没被拖动或者应用程序没快捷形式的这时候,两者是相等的。

JavaScript 中的各种宽高以及位置总结
举报/反馈

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务