JavaScript中的各類寬高以及位置總結

時間 2019-11-06

標籤 javascript 各類以及位置總結欄目 JavaScript 简体版

原文原文鏈接

在javascript中操做dom節點讓其運動的時候，經常會涉及到各類寬高以及位置座標等概念，若是不能很好地理解這些屬性所表明的意義，就不能理解js的運動原理，同時，因爲這些屬性概念較多，加上瀏覽器之間javascript

實現方式不一樣，經常會形成概念混淆，通過研究以後，這裏來進行一個總結。css

第一部分：DOM對象

1.1只讀屬性

所謂的只讀屬性指的是DOM節點的固有屬性，該屬性只能經過js去獲取而不能經過js去設置，並且獲取的值是隻有數字並不帶單位的（px,em等），以下：html

1）clientWidth和clientHeight

該屬性指的是元素的可視部分寬度和高度，即padding+content，若是沒有滾動條，即爲元素設定的高度和寬度，若是出現滾動條，滾動條會遮蓋元素的寬高，那麼該屬性就是其原本寬高減去滾動條的寬高java

css:chrome

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

jsdom

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

結果：性能

元素原本設定爲寬高都是200，便可視部分寬高都是200，可是因爲出現了垂直方向的滾動條，佔據了可視部分的寬度，因此clientWidth變成了183，而clientHeight依然是200.ui

2）offsetWidth和offsetHeight

這一對屬性指的是元素的border+padding+content的寬度和高度，該屬性和其內部的內容是否超出元素大小無關，只和原本設定的border以及width和height有關this

css和HTML部分同上，js部分以下：

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

最終結果：

能夠看到該屬性和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>

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

最終結果：

能夠看到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>

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

最終結果：

這裏讓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>

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

最終結果

儘管該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>

最終結果：

因爲拖動了滾動條，scrollTop的屬性值一直在增大，而水平方向沒有滾動條，因此scrollLeft一直爲0.

該屬性還能夠經過賦值內容自動滾動到某個位置，js以下：

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

結果以下：

經過直接設定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），該屬性以瀏覽器左上角座標爲原點，計算鼠標點擊位置距離其左上角的位置，

無論瀏覽器窗口大小如何變化，都不會影響點擊位置的座標。

結果：

2）screenX和screenY是事件發生時鼠標相對於屏幕的座標，以設備屏幕的左上角爲原點，事件發生時鼠標點擊的地方即爲該點的screenX和screenY值，以下所示：

能夠看到儘管瀏覽器窗口被縮到很小，可是座標值卻很大，由於是相對於屏幕座標而不是瀏覽器的座標。

3）offsetX和offsetY

這一對屬性是指當事件發生時，鼠標點擊位置相對於該事件源的位置，即點擊該div，以該div左上角爲原點來計算鼠標點擊位置的座標，以下所示：

能夠看到，點擊該div的靠近左上角處，它的offsetX和offsetY爲1,0，須要注意的是，IE，chrome，opera都支持該屬性，惟獨Firefox不支持該屬性，Firefox中與此屬性相對應的概念是，event.layerX和event.layerY,因此須要兼容瀏覽器時，獲取鼠標點擊位置相對於事件源的座標的兼容寫法爲var disX=event.offsetX||event.layerX.