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

2019年8月26日 165次阅读 来源: kidsamong

在javascript中操纵dom节点让其活动的时刻，常常会涉及到种种宽高以及位置坐标等观点，假如不能很好地明白这些属性所代表的意义，就不能明白js的活动道理，同时，由于这些属性观点较多，加上浏览器之间

完成体式格局差别，常常会形成观点殽杂，经由研讨以后，这里来举行一个总结。

第一部份：DOM对象

1.1只读属性

所谓的只读属性指的是DOM节点的固有属性，该属性只能经由过程js去猎取而不能经由过程js去设置，而且猎取的值是只要数字并不带单元的（px,em等），以下：

1）clientWidth和clientHeight

该属性指的是元素的可视部份宽度和高度，即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>

效果：

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

元素原本设定为宽高都是200，即可视部份宽高都是200，然则由于涌现了垂直方向的滚动条，占有了可视部份的宽度，所以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>

js

<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>

js

<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>

js

<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猎取该属性的值，还可以经由过程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),同时，关于这类体式格局，

它只可以猎取到该元素的行内款式，而并不能猎取到该元素终究盘算好的款式，这就是在读取属性值得时刻和以上只读属性的区分，要猎取盘算好的款式，请使用obj.currentstyle（IE）和getComputedStyle(IE以外的浏览器)。另一方面，这些属性可以被赋值，js活动的道理就是经由过程不停修正这些属性的值而到达其位置转变的，须要注重的是，给这些属性赋值的时刻须要带单元的要带上单元，否则不见效。

第二部份 Event对象

在js中，关于元素的活动的操纵一般都邑涉及到event对象，而event对象也存在许多位置属性，且由于浏览器兼容性问题会致使这些属性间互相殽杂，这里逐一解说。

1）clientX和clientY，这对属性是当事宜发作时，鼠标点击位置相关于浏览器（可视区）的坐标，即浏览器左上角坐标的（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中的种种宽高以及位置总结》

2）screenX和screenY是事宜发作时鼠标相关于屏幕的坐标，以装备屏幕的左上角为原点，事宜发作时鼠标点击的处所即为该点的screenX和screenY值，以下所示：

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

可以看到只管浏览器窗口被缩到很小，然则坐标值却很大，由于是相关于屏幕坐标而不是浏览器的坐标。

3）offsetX和offsetY

这一对属性是指当事宜发作时，鼠标点击位置相关于该事宜源的位置，即点击该div，以该div左上角为原点来盘算鼠标点击位置的坐标，以下所示：

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

可以看到，点击该div的接近左上角处，它的offsetX和offsetY为1,0，须要注重的是，IE，chrome，opera都支撑该属性，惟独Firefox不支撑该属性，Firefox中与此属性相对应的观点是，event.layerX和event.layerY,所以须要兼容浏览器时，猎取鼠标点击位置相关于事宜源的坐标的兼容写法为var disX=event.offsetX||event.layerX.

4)pageX和pageY

望文生义，该属性是事宜发作时鼠标点击位置相关于页面的位置，一般浏览器窗口没有涌现滚动条时，该属性和event.clientX及event.clientY是等价的，然则当浏览器涌现滚动条的时刻，pageX一般会大于clientX，由于页面还存在被卷起来的部份的宽度和高度，以下所示：

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

由于浏览器涌现了垂直和程度的滚动条，所以pageX和pageY大于clientX和clientY。

当浏览器的滚动条没有被拖动或许浏览器没有滚动条的时刻，二者是相称的。

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

文章转自js中的种种宽高以及位置总结

    原文作者：kidsamong
    原文地址: https://segmentfault.com/a/1190000002545307
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞