javascript中的各種寬高以及位置總結

在javascript中操作dom節點讓其運動的時候,常常會涉及到各種寬高以及位置坐標等概念,如果不能很好地理解這些屬性所代表的意義,就不能理解js的運動原理,同時,由于這些屬性概念較多,加上瀏覽器之間實現方式不同,常常會造成概念混淆,經過研究之后,這里來進行一個總結。

第一部分:DOM對象

  • 只讀屬性

所謂的只讀屬性指的是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>

結果:




元素本來設定為寬高都是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>

最終結果:



可以看到該屬性和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>

可以看到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>

最終結果:



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

最終結果:



盡管該div的寬高都是100,但是其scrollheight為234顯示的是其中內容的實際高度,scrollWidth為83(由于滾動條占據了寬度)

-可讀可寫屬性
所謂的可讀可寫屬性指的是不僅能通過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),該屬性以瀏覽器左上角坐標為原點,計算鼠標點擊位置距離其左上角的位置,不管瀏覽器窗口大小如何變化,都不會影響點擊位置的坐標。

JS:

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

結果:



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.

4.pageX和pageY
顧名思義,該屬性是事件發生時鼠標點擊位置相對于頁面的位置,通常瀏覽器窗口沒有出現滾動條時,該屬性和event.clientX及event.clientY是等價的,但是當瀏覽器出現滾動條的時候,pageX通常會大于clientX,因為頁面還存在被卷起來的部分的寬度和高度,如下所示:



由于瀏覽器出現了垂直和水平的滾動條,所以pageX和pageY大于clientX和clientY。

當瀏覽器的滾動條沒有被拖動或者瀏覽器沒有滾動條的時候,兩者是相等的。



補充:e.clientX 相對于文檔的水平坐標。(也就是鼠標點擊的位置到瀏覽器左邊的位置)
e.clientY相對于文檔的水平坐標(也就是鼠標點擊的位置到瀏覽器上邊的位置)
e.offsetLeft:當前對象到上級層左邊的距離。
e.offsetTop:當前對象到上級層上邊的距離。
e.offsetWidth:當前對象的寬度。
e.offsetHeight:當前對象的高度。


image.png
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,791評論 1 92
  • 原文鏈接 http://blog.poetries.top/2016/12/13/js-props聲明:本文根據慕...
    前端進階之旅閱讀 3,313評論 1 44
  • Window和document對象的區別 window對象window對象表示瀏覽器中打開的窗口window對象是...
    FConfidence閱讀 2,242評論 0 5
  • 一、JS前言 (1)認識JS 也許你已經了解HTML標記(也稱為結構),知道了CSS樣式(也稱為表示),會使用HT...
    凜0_0閱讀 2,798評論 0 8
  • 轉自龍巔水族社區 【新買的黑殼蝦,你要注意了】 先看看以下幾張圖片,你會發現,黑殼蝦你怎么長須了這就是黑殼大軍陣亡...
    柏衡閱讀 21,294評論 0 1