91麻豆精品在线观看_一级做性色a爰片久久毛片免费_zzijzzij亚洲日本少妇jizjiz_国产日产欧美欧韩在线_日本高清在线www3344

 最近研究DOM，這是js操作的基礎(chǔ)，不深入了解，你沒(méi)法跟瀏覽器親密對(duì)話。廢話不多說(shuō)，今天對(duì)client，offset，scroll及style寬高家族左翼深入探討，以chrome為例，其他瀏覽器可能有解析上的差別。

具體來(lái)說(shuō)即：

1.clientWidth，clientHeight，clientLeft，clientTop；

2.offsetWidth，offsetHeight，offsetLeft，offsetTop；

3.scrollWidth，scrollHeight，scrollLeft，scrollTop；

4.height，width。

clientWidth

顧名思義，client，客戶端。具體到某一個(gè)元素比如html，body或者a，p，img指的就是這個(gè)元素，而非常規(guī)理解的客戶端諸如瀏覽器。

html標(biāo)簽：

當(dāng)html各種屬性為默認(rèn)值時(shí)，內(nèi)部是空的head及body元素，其clientWidth值即為視口寬度，比如我的電腦屏寬1366px，當(dāng)縮放瀏覽器的時(shí)候，該值變成縮放后的寬度，而當(dāng)豎直滾動(dòng)條出現(xiàn)的時(shí)候，需減去滾動(dòng)條的寬度（豎直滾動(dòng)條在高度大于可視屏幕高度時(shí)出現(xiàn)，可能是html或其子元素?fù)伍_(kāi)的）。而移動(dòng)端瀏覽器是不支持縮放的，因此在默認(rèn)情況下，這個(gè)值就是內(nèi)置的視口寬度，所謂視口寬度不是硬件屏寬，而是虛擬寬度，比如iphone6為980px，實(shí)際屏寬沒(méi)這么大。

由于影響寬度的屬性有width，margin，padding，border，outline。我們逐一來(lái)看，當(dāng)設(shè)置html有width，margin，padding，border，outline任意一個(gè)或累加的時(shí)候，clientWidth不受影響。也即html的clientWidth只與客戶端內(nèi)置視口寬及用戶縮放行為有關(guān)。

如果內(nèi)部元素body非默認(rèn)值，而是設(shè)定width，margin，padding，border，outline任意一個(gè)或累加的時(shí)候，我們看看html的clientWidth的表現(xiàn)，經(jīng)測(cè)試，無(wú)論設(shè)置多少不會(huì)對(duì)html的clientWidth造成影響，驗(yàn)證了該值只與客戶端內(nèi)置視口寬及用戶縮放行為有關(guān)的結(jié)論。

如果出現(xiàn)右側(cè)滾動(dòng)條，一般是當(dāng)元素高大于瀏覽器可見(jiàn)部分高時(shí)出現(xiàn)，該值需要減去滾動(dòng)條的寬度，即16px。

以上測(cè)試使用的chrome瀏覽器，其他瀏覽器可能會(huì)有區(qū)別?？偟囊痪湓?，html標(biāo)簽該值只與客戶端內(nèi)置視口寬及用戶縮放行為有關(guān)。

body標(biāo)簽：

當(dāng)body標(biāo)簽各種屬性為默認(rèn)值時(shí)，內(nèi)部為空，父元素html為默認(rèn)屬性。其clientWidth值跟html一樣，即受客戶端內(nèi)置視口寬及縮放行為影響，如果出現(xiàn)滾動(dòng)條，則需減去滾動(dòng)條的寬度16px，而且body默認(rèn)左右各8px的margin。

tips：body最大clientWidth為33554430px。

而若在其父元素，子元素各項(xiàng)屬性值保持默認(rèn)的情況下，body設(shè)置以上width等5項(xiàng)值，會(huì)出現(xiàn)什么情況呢？當(dāng)設(shè)置了寬，該值變?yōu)閷?，?dāng)設(shè)置了padding，該值變?yōu)閷?padding，也即設(shè)置本身本身就具有了優(yōu)先級(jí)，而設(shè)置另外三項(xiàng)則不受影響。這個(gè)寬度是不受限制的，小可到0，大可到無(wú)窮，當(dāng)然這個(gè)無(wú)法驗(yàn)證，數(shù)值太大，瀏覽器會(huì)崩潰。

而若本身保持默認(rèn)值，父元素html進(jìn)行5項(xiàng)值測(cè)試，設(shè)置寬，結(jié)果變成該寬值減去滾動(dòng)條寬度16px，即便沒(méi)出現(xiàn)滾動(dòng)條也是如此。而設(shè)置其他值不受影響。也即body的clientWidth是受父元素html的寬影響的，其他值不對(duì)該值造成影響。

若本身及父元素保持默認(rèn)值，子元素變動(dòng)5項(xiàng)值的時(shí)候，該值不受影響。

經(jīng)以上驗(yàn)證，body的該值只受本身的寬+padding及父元素html寬的影響，本身值更具優(yōu)先級(jí)，也即一旦設(shè)置本身寬+padding，父元素的寬失效。

p標(biāo)簽（block元素）：

當(dāng)父元素，子元素及本身都為默認(rèn)值時(shí)，該值需要減去父元素body默認(rèn)的margin左右各8px，當(dāng)出現(xiàn)滾動(dòng)條還需減去滾動(dòng)條的寬度。實(shí)際等同于父元素的寬，如果自身有border還需減去。

當(dāng)父子元素默認(rèn)，本身設(shè)置以上5值，除本身寬+padding外，其他值不影響，也即clientWidth值等于本身寬加上本身左右padding。該結(jié)論跟body一樣。

當(dāng)本身及子元素默認(rèn)，父元素設(shè)置5項(xiàng)，該值表現(xiàn)跟body一樣，即該值成為父元素寬度，其他四項(xiàng)不造成影響。

當(dāng)本身及父元素為默認(rèn)，子元素設(shè)置5項(xiàng)，該值恢復(fù)到各項(xiàng)都為默認(rèn)值的時(shí)候，即屏寬減去左右padding各8px。

由此可見(jiàn)，block元素的clientWidth也只受本身寬+padding及父元素寬的影響，如果包括父元素往上追蹤皆未設(shè)置寬度，則會(huì)一直追到根元素html的默認(rèn)值，在PC是客戶端可見(jiàn)寬，在移動(dòng)端是內(nèi)置視口寬。而若設(shè)置了本身寬，padding，或?qū)?padding，則該值即是這些值，棄用父元素及往上繼承的寬度。

video（inline-block元素）：

當(dāng)父子及本身為默認(rèn)時(shí)，該值為0。

當(dāng)父子為默認(rèn)，本身設(shè)置5值，該值為本身寬+padding。

當(dāng)本身及子為默認(rèn)值，父設(shè)置5值，該值為0，也即不受父元素寬度影響，這是跟block元素相區(qū)別的地方。

當(dāng)本身及父元素為默認(rèn)值，子元素設(shè)置5值，此類情況對(duì)于自閉合標(biāo)簽不適用。該值恢復(fù)默認(rèn)值，也即該元素內(nèi)置的寬+padding。

因此對(duì)于inline-block元素來(lái)說(shuō)，其clientWidth只受本身寬+padding的影響，不受其他影響。

a（inline元素）：

當(dāng)父子及本身為默認(rèn)時(shí)，該值為0。

當(dāng)父子為默認(rèn)，本身設(shè)置5值，該值為0。

當(dāng)本身及子為默認(rèn)，父為5值，該值為0。

當(dāng)本身及父為默認(rèn)，子為5值，該值為0。

一句話，對(duì)于inline元素來(lái)說(shuō)，clientWidth這個(gè)值始終為0，即便內(nèi)有文本元素也為0。

總而言之，根元素html只受默認(rèn)視口及用戶行為影響；block元素，包括body及其他塊clientWidth受自身寬+padding及父元素寬的影響，且以自身為優(yōu)先；inline-block只受自身寬+padding影響；inline不受任何影響，始終為0。再總結(jié)下，clientWidth實(shí)際就是自身所有的寬+padding。內(nèi)聯(lián)元素皆無(wú)，內(nèi)聯(lián)塊和塊級(jí)元素二者之和。

ok，按著這樣一梳理，這個(gè)屬性背后隱藏的東西就一目了然了，后面繼續(xù)家族中其他元素的驗(yàn)證及解讀。前幾天看了網(wǎng)絡(luò)上的幾篇文章，有出入，因此決定自己一探究竟。