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

microelec 發布于2019-08-21 10:26 / 457人閱讀

摘要：和這一對屬性是用來讀取元素的的寬度和高度的。第二部分對象在中，對于元素的運動的操作通常都會涉及到對象，而對象也存在很多位置屬性，且由于瀏覽器兼容性問題會導致這些屬性間相互混淆，這里一一講解。文章轉自中的各種寬高以及位置總結

在javascript中操作dom節點讓其運動的時候，常常會涉及到各種寬高以及位置坐標等概念，如果不能很好地理解這些屬性所代表的意義，就不能理解js的運動原理，同時，由于這些屬性概念較多，加上瀏覽器之間

實現方式不同，常常會造成概念混淆，經過研究之后，這里來進行一個總結。

第一部分：DOM對象 1.1只讀屬性

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

1）clientWidth和clientHeight

該屬性指的是元素的可視部分寬度和高度，即padding+content，如果沒有滾動條，即為元素設定的高度和寬度，如果出現滾動條，滾動條會遮蓋元素的寬高，那么該屬性就是其本來寬高減去滾動條的寬高

css:

HTML



    javascript高級應用

    javascript高級應用

    javascript高級應用

    javascript高級應用

    javascript高級應用

    javascript高級應用

    javascript高級應用

    javascript高級應用

    javascript高級應用

    javascript高級應用

    javascript高級應用

    javascript高級應用

    javascript高級應用

    javascript高級應用

    javascript高級應用

    javascript高級應用

    javascript高級應用

    javascript高級應用

結果：

元素本來設定為寬高都是200，即可視部分寬高都是200，但是由于出現了垂直方向的滾動條，占據了可視部分的寬度，所以clientWidth變成了183，而clientHeight依然是200.

2）offsetWidth和offsetHeight

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

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

最終結果：

可以看到該屬性和clientWidth以及clientHeight相比，多了設定的邊框border的寬度和高度。

3）clientTop和clientLeft

這一對屬性是用來讀取元素的border的寬度和高度的。

css

html

最終結果：

?可以看到div的border被設定了1px的寬，這里顯示的就是它的寬度

4）offsetLeft和offsetTop

說到這對屬性就需要說下offsetParent,所謂offsetParent指的是當前元素的離自己最近的具有定位的（position:absolute或者position：relative）父級元素（不僅僅指的是直接父級元素，只要是它的父元素都可以），該父級元素就是當前元素的offsetParent，如果從該元素向上尋找，找不到這樣一個父級元素，那么當前元素的offsetParent就是body元素。而offsetLeft和offsetTop指的是當前元素，相對于其offsetParent左邊距離和上邊距離，即當前元素的border到包含它的offsetParent的border的距離如下所示：

css

HTML

最終結果：

?這里讓div.two相對定位，讓div.one絕對定位，所以div.two是one的offsetParent,同時，又給div.one加了一個margin為20px,所以這里它的offsetTop為40，offsetLeft 本來為0，但是加上margin為20之后就變成了20.

5）scrollHeight和scrollWidth

顧名思義，這兩個屬性指的是當元素內部的內容超出其寬度和高度的時候，元素內部內容的實際寬度和高度，需要注意的是，當元素其中內容沒有超過其高度或者寬度的時候，該屬性是取不到的。

css

HTML



    我是內容

    我是內容

    我是內容

    我是內容

    我是內容

    我是內容

    我是內容

    我是內容

    我是內容

    我是內容

    我是內容

    我是內容

    我是內容

最終結果

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

1.2可讀可寫屬性

所謂的可讀可寫屬性指的是不僅能通過js獲取該屬性的值，還能夠通過js為該屬性賦值。

1）scrollTop和scrollLeft

這對屬性是可讀寫的，指的是當元素其中的內容超出其寬高的時候，元素被卷起的高度和寬度。

css和html部分同上，js部分如下：

最終結果：

由于拖動了滾動條，scrollTop的屬性值一直在增大，而水平方向沒有滾動條，所以scrollLeft一直為0.

該屬性還可以通過賦值內容自動滾動到某個位置，js如下：

結果如下：

通過直接設定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.

4)pageX和pageY

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

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

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

文章轉自js中的各種寬高以及位置總結

云服務器 GPU云服務器 js中的6大數據類型以及應用 javascript學習總結 vps日常維護中的一些要點總結 javascript中的

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/85529.html

javascript中各種寬高、間距總結

一、DOM對象 1、只讀屬性（1）clientWidth、clientHeight： padding + content ( - scroll寬度 )（2）offsetWidth、offsetHeight：padding + content + border（3）clientTop、clientLeft：border的top、border的left（4）offsetTop、offsetLeft：...

DC_er 2019-08-23 13:13 評論0 收藏0
JavaScript中的各種寬高屬性

摘要：在中，存在著多的關于高度和寬度的屬性，比如等等這么多，傻傻分不清也正常啊。第二問題對象的屬性引用的是對象，表示該窗口中當前顯示文檔的。如果出現滾動條，滾動條會遮蓋元素的寬高，那么該屬性就是其本來寬高減去滾動條的寬高。在js中，存在著N多的關于高度和寬度的屬性，比如：clientHeight、offsetHeight、scrollHeight、availHeight、scrollLef...

wangbinke 2019-08-20 12:21 評論0 收藏0
Javascript零碎之各種寬高屬性及應用

摘要：一掛在上的上最常用的只有其中，永遠都是窗口的大小，跟隨窗口變化而變化。這個是距該元素最近的不為的祖先元素，如果沒有則指向元素。在Javascript的開發過程中，我們總會看到類似如下的邊界條件判斷(懶加載)： const scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.b...

DevYK 2019-08-23 18:21 評論0 收藏0
瀏覽器內核之 CSS 解釋器和樣式布局

摘要：書接上文瀏覽器內核之解釋器和模型本文剖析的解釋器和樣式布局。根據生成解釋器類。而后將解釋后的信息設置到元素的屬性的樣式中，然后設置標記表明該元素需要重新計算樣式，并觸發重新計算布局。 showImg(https://segmentfault.com/img/remote/1460000016215814); 微信公眾號：愛寫bugger的阿拉斯加如有問題或建議，請后臺留言，我會盡力解決...

_Dreams 2019-08-29 16:40 評論0 收藏0
瀏覽器內核之 CSS 解釋器和樣式布局

摘要：書接上文瀏覽器內核之解釋器和模型本文剖析的解釋器和樣式布局。根據生成解釋器類。而后將解釋后的信息設置到元素的屬性的樣式中，然后設置標記表明該元素需要重新計算樣式，并觸發重新計算布局。 showImg(https://segmentfault.com/img/remote/1460000016215814); 微信公眾號：愛寫bugger的阿拉斯加如有問題或建議，請后臺留言，我會盡力解決...

xiangchaobin 2019-08-23 11:50 評論0 收藏0