摘要：和這一對(duì)屬性是用來(lái)讀取元素的的寬度和高度的。第二部分對(duì)象在中，對(duì)于元素的運(yùn)動(dòng)的操作通常都會(huì)涉及到對(duì)象，而對(duì)象也存在很多位置屬性，且由于瀏覽器兼容性問(wèn)題會(huì)導(dǎo)致這些屬性間相互混淆，這里一一講解。文章轉(zhuǎn)自中的各種寬高以及位置總結(jié)

在javascript中操作dom節(jié)點(diǎn)讓其運(yùn)動(dòng)的時(shí)候，常常會(huì)涉及到各種寬高以及位置坐標(biāo)等概念，如果不能很好地理解這些屬性所代表的意義，就不能理解js的運(yùn)動(dòng)原理，同時(shí)，由于這些屬性概念較多，加上瀏覽器之間

實(shí)現(xiàn)方式不同，常常會(huì)造成概念混淆，經(jīng)過(guò)研究之后，這里來(lái)進(jìn)行一個(gè)總結(jié)。

所謂的只讀屬性指的是DOM節(jié)點(diǎn)的固有屬性，該屬性只能通過(guò)js去獲取而不能通過(guò)js去設(shè)置，而且獲取的值是只有數(shù)字并不帶單位的（px,em等），如下：

該屬性指的是元素的可視部分寬度和高度，即padding+content，如果沒(méi)有滾動(dòng)條，即為元素設(shè)定的高度和寬度，如果出現(xiàn)滾動(dòng)條，滾動(dòng)條會(huì)遮蓋元素的寬高，那么該屬性就是其本來(lái)寬高減去滾動(dòng)條的寬高

css:

HTML

    javascript高級(jí)應(yīng)用

    javascript高級(jí)應(yīng)用

    javascript高級(jí)應(yīng)用

    javascript高級(jí)應(yīng)用

    javascript高級(jí)應(yīng)用

    javascript高級(jí)應(yīng)用

    javascript高級(jí)應(yīng)用

    javascript高級(jí)應(yīng)用

    javascript高級(jí)應(yīng)用

    javascript高級(jí)應(yīng)用

    javascript高級(jí)應(yīng)用

    javascript高級(jí)應(yīng)用

    javascript高級(jí)應(yīng)用

    javascript高級(jí)應(yīng)用

    javascript高級(jí)應(yīng)用

    javascript高級(jí)應(yīng)用

    javascript高級(jí)應(yīng)用

    javascript高級(jí)應(yīng)用

js

結(jié)果：

元素本來(lái)設(shè)定為寬高都是200，即可視部分寬高都是200，但是由于出現(xiàn)了垂直方向的滾動(dòng)條，占據(jù)了可視部分的寬度，所以clientWidth變成了183，而clientHeight依然是200.

這一對(duì)屬性指的是元素的border+padding+content的寬度和高度，該屬性和其內(nèi)部的內(nèi)容是否超出元素大小無(wú)關(guān)，只和本來(lái)設(shè)定的border以及width和height有關(guān)

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

最終結(jié)果：

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

這一對(duì)屬性是用來(lái)讀取元素的border的寬度和高度的。

css

html

js

最終結(jié)果：

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

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

css

HTML

js

最終結(jié)果：

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

顧名思義，這兩個(gè)屬性指的是當(dāng)元素內(nèi)部的內(nèi)容超出其寬度和高度的時(shí)候，元素內(nèi)部?jī)?nèi)容的實(shí)際寬度和高度，需要注意的是，當(dāng)元素其中內(nèi)容沒(méi)有超過(guò)其高度或者寬度的時(shí)候，該屬性是取不到的。

css

HTML

    我是內(nèi)容

    我是內(nèi)容

    我是內(nèi)容

    我是內(nèi)容

    我是內(nèi)容

    我是內(nèi)容

    我是內(nèi)容

    我是內(nèi)容

    我是內(nèi)容

    我是內(nèi)容

    我是內(nèi)容

    我是內(nèi)容

    我是內(nèi)容

js

最終結(jié)果

?盡管該div的寬高都是100，但是其scrollheight為234顯示的是其中內(nèi)容的實(shí)際高度，scrollWidth為83（由于滾動(dòng)條占據(jù)了寬度）

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

這對(duì)屬性是可讀寫(xiě)的，指的是當(dāng)元素其中的內(nèi)容超出其寬高的時(shí)候，元素被卷起的高度和寬度。

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

最終結(jié)果：

由于拖動(dòng)了滾動(dòng)條，scrollTop的屬性值一直在增大，而水平方向沒(méi)有滾動(dòng)條，所以scrollLeft一直為0.

該屬性還可以通過(guò)賦值內(nèi)容自動(dòng)滾動(dòng)到某個(gè)位置，js如下：

結(jié)果如下：

通過(guò)直接設(shè)定div的scrollTop,讓它直接顯示在滾動(dòng)條在20垂直方向上20的位置。

對(duì)于一個(gè)dom元素，它的style屬性返回的是一個(gè)對(duì)象，這個(gè)對(duì)象中的任意一個(gè)屬性是可讀寫(xiě)的。如obj.style.top,obj.style.wdith等，在讀的時(shí)候，他們返回的值常常是帶有單位的(如px),同時(shí)，對(duì)于這種方式，

它只能夠獲取到該元素的行內(nèi)樣式，而并不能獲取到該元素最終計(jì)算好的樣式，這就是在讀取屬性值得時(shí)候和以上只讀屬性的區(qū)別，要獲取計(jì)算好的樣式，請(qǐng)使用obj.currentstyle（IE）和getComputedStyle(IE之外的瀏覽器)。另一方面，這些屬性能夠被賦值，js運(yùn)動(dòng)的原理就是通過(guò)不斷修改這些屬性的值而達(dá)到其位置改變的，需要注意的是，給這些屬性賦值的時(shí)候需要帶單位的要帶上單位，否則不生效。

在js中，對(duì)于元素的運(yùn)動(dòng)的操作通常都會(huì)涉及到event對(duì)象，而event對(duì)象也存在很多位置屬性，且由于瀏覽器兼容性問(wèn)題會(huì)導(dǎo)致這些屬性間相互混淆，這里一一講解。

不管瀏覽器窗口大小如何變化，都不會(huì)影響點(diǎn)擊位置的坐標(biāo)。

js

結(jié)果：

可以看到盡管瀏覽器窗口被縮到很小，但是坐標(biāo)值卻很大，因?yàn)槭窍鄬?duì)于屏幕坐標(biāo)而不是瀏覽器的坐標(biāo)。

這一對(duì)屬性是指當(dāng)事件發(fā)生時(shí)，鼠標(biāo)點(diǎn)擊位置相對(duì)于該事件源的位置，即點(diǎn)擊該div，以該div左上角為原點(diǎn)來(lái)計(jì)算鼠標(biāo)點(diǎn)擊位置的坐標(biāo)，如下所示：

可以看到，點(diǎn)擊該div的靠近左上角處，它的offsetX和offsetY為1,0，需要注意的是，IE，chrome，opera都支持該屬性，唯獨(dú)Firefox不支持該屬性，F(xiàn)irefox中與此屬性相對(duì)應(yīng)的概念是，event.layerX和event.layerY,所以需要兼容瀏覽器時(shí)，獲取鼠標(biāo)點(diǎn)擊位置相對(duì)于事件源的坐標(biāo)的兼容寫(xiě)法為var disX=event.offsetX||event.layerX.

顧名思義，該屬性是事件發(fā)生時(shí)鼠標(biāo)點(diǎn)擊位置相對(duì)于頁(yè)面的位置，通常瀏覽器窗口沒(méi)有出現(xiàn)滾動(dòng)條時(shí)，該屬性和event.clientX及event.clientY是等價(jià)的，但是當(dāng)瀏覽器出現(xiàn)滾動(dòng)條的時(shí)候，pageX通常會(huì)大于clientX，因?yàn)轫?yè)面還存在被卷起來(lái)的部分的寬度和高度，如下所示：

由于瀏覽器出現(xiàn)了垂直和水平的滾動(dòng)條，所以pageX和pageY大于clientX和clientY。

當(dāng)瀏覽器的滾動(dòng)條沒(méi)有被拖動(dòng)或者瀏覽器沒(méi)有滾動(dòng)條的時(shí)候，兩者是相等的。

文章轉(zhuǎn)自js中的各種寬高以及位置總結(jié)