資訊專欄INFORMATION COLUMN
摘要：如果塊級(jí)元素沒有設(shè)置高度，則返回實(shí)際高度。如果有水平滾動(dòng)條，還要減去水平滾動(dòng)條的高度。一般來說，大于整張網(wǎng)頁的總高度可以從或上讀取。有關(guān)坐標(biāo)的屬性返回鼠標(biāo)事件觸發(fā)時(shí)鼠標(biāo)相對(duì)于元素視口的坐標(biāo)。
自己記不住,列一下關(guān)于CSS和JS中用到的各類有關(guān)Height和Width屬性的介紹對(duì)比.
| 所屬類別 | 屬性名 | 意義 | 其他 |
|---|---|---|---|
| 瀏覽器模型 | Screen.height | 瀏覽器窗口所在的屏幕的高度（單位像素） |
1.除非調(diào)整顯示器的分辨率，否則這個(gè)值可以看作常量，不會(huì)發(fā)生變化。 2.顯示器的分辨率與瀏覽器設(shè)置無關(guān)，縮放網(wǎng)頁并不會(huì)改變分辨率。 |
| Screen.width | 瀏覽器窗口所在的屏幕的寬度（單位像素） | ||
| Screen.availHeight | 瀏覽器窗口可用的屏幕高度（單位像素） | 因?yàn)椴糠挚臻g可能不可用，比如系統(tǒng)的任務(wù)欄或者 Mac 系統(tǒng)屏幕底部的 Dock 區(qū)，這個(gè)屬性等于height減去那些被系統(tǒng)組件的高度。 | |
| Screen.availWidth | 瀏覽器窗口可用的屏幕寬度（單位像素） | ||
| window.innerHeight | 返回網(wǎng)頁在當(dāng)前窗口中可見部分的高度（單位像素） | 1.只讀,用戶放大網(wǎng)頁的時(shí)候（比如將網(wǎng)頁從100%的大小放大為200%），這兩個(gè)屬性會(huì)變小。因?yàn)檫@時(shí)網(wǎng)頁的像素大小不變（比如寬度還是960像素），只是每個(gè)像素占據(jù)的屏幕空間變大了，因?yàn)榭梢姴糠郑ㄒ暱冢┚妥冃×恕? 2.注意:這兩個(gè)屬性值包括滾動(dòng)條的高度和寬度 |
|
| window.innerWidth | 返回網(wǎng)頁在當(dāng)前窗口中可見部分的寬度 | ||
| window.outerHeight | 返回瀏覽器窗口的高度 | 包括瀏覽器菜單和邊框（單位像素）,只讀 | |
| window.outerWidth | 返回瀏覽器窗口的寬度 | ||
| 元素節(jié)點(diǎn) | Element.clientHeight | 返回一個(gè)整數(shù)值，表示元素節(jié)點(diǎn)的 CSS 高度（單位像素） |
1.只對(duì)塊級(jí)元素生效，對(duì)于行內(nèi)元素返回0。如果塊級(jí)元素沒有設(shè)置 CSS 高度，則返回實(shí)際高度。
2.除了元素本身的高度，它還包括padding部分，但是不包括border、margin。如果有水平滾動(dòng)條，還要減去水平滾動(dòng)條的高度。 3.注意，這個(gè)值始終是整數(shù)，如果是小數(shù)會(huì)被四舍五入。 |
| Element.clientWidth | 返回元素節(jié)點(diǎn)的 CSS 寬度 | ||
| Element.scrollHeight | 表示當(dāng)前元素的總高度（單位像素），包括溢出容器、當(dāng)前不可見的部分 |
1.只讀.
2.它包括padding，但是不包括border、margin以及水平滾動(dòng)條的高度（如果有水平滾動(dòng)條的話），還包括偽元素（::before或::after）的高度。 |
|
| Element.scrollWidth | 表示當(dāng)前元素的總寬度（單位像素） | ||
| Element.offsetHeight | 表示元素節(jié)點(diǎn)的 CSS 高度（單位像素） |
1.包括元素本身的高度、padding 和 border，以及水平滾動(dòng)條的高度（如果存在滾動(dòng)條）。 2.只讀屬性。? ? ? ? ? 3.只比 Element.clientHeight和Element.clientWidth多了邊框的高度或?qū)挾取?4.如果元素的 CSS 設(shè)為不可見（比如display: none;），則返回0。 |
|
| Element.offsetWidth | 表示元素的 CSS 水平寬度（單位像素） | ||
| 備注 |
1.document.documentElement的clientHeight屬性，返回當(dāng)前視口的高度（即瀏覽器窗口的高度），等同于window.innerHeight屬性減去水平滾動(dòng)條的高度（如果有的話）
2.document.body的高度則是網(wǎng)頁的實(shí)際高度。一般來說，document.body.clientHeight大于document.documentElement.clientHeight 3.整張網(wǎng)頁的總高度可以從document.documentElement.scrollHeight或document.body.scrollHeight上讀取。 |
||
?
有關(guān)坐標(biāo)的屬性：? ?
1. MoiseEvent.clientX：返回鼠標(biāo)事件觸發(fā)時(shí)鼠標(biāo)相對(duì)于元素視口（body）的X坐標(biāo)。
2. MouseEvent.clientY：返回鼠標(biāo)事件觸發(fā)時(shí)鼠標(biāo)相對(duì)于元素視口（body）的Y坐標(biāo)
?
如果有錯(cuò)誤,麻煩您指出,相互學(xué)習(xí).
謝謝~~
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/1484.html
摘要：經(jīng)過半年的打磨，正式發(fā)布，主要是新增了一些常用組件，并使用命名，為接下來的微信小程序開發(fā)做好準(zhǔn)備。這兩種方式實(shí)現(xiàn)的瀑布流式布局均支持首屏和網(wǎng)頁窗口大小改變時(shí)的列數(shù)自適應(yīng)。主要是對(duì)于標(biāo)準(zhǔn)里的布局方式草案中的布局方式進(jìn)行一些總結(jié)。 一勞永逸的搞定 flex 布局 尋根溯源話布局 一切都始于這樣一個(gè)問題：怎樣通過 CSS 簡單而優(yōu)雅的實(shí)現(xiàn)水平、垂直同時(shí)居中。記得剛開始學(xué)習(xí) CSS 的時(shí)候，看...
摘要：做移動(dòng)端頁面以來，經(jīng)常會(huì)聽說移動(dòng)端的適配這個(gè)問題，但是并沒有認(rèn)真分析過是如何適配各種機(jī)型的。目前公司用的是手淘的進(jìn)行頁面適配的。手淘那個(gè)還有的地方看不懂，還是自己太了，但是看不懂車不影響老司機(jī)開車。 做移動(dòng)端頁面以來，經(jīng)常會(huì)聽說移動(dòng)端的適配這個(gè)問題，但是并沒有認(rèn)真分析過是如何適配各種機(jī)型的。目前公司用的是手淘的flexible.js進(jìn)行頁面適配的。適配的根本原理其實(shí)就是將設(shè)計(jì)稿按一定的...
摘要：做移動(dòng)端頁面以來，經(jīng)常會(huì)聽說移動(dòng)端的適配這個(gè)問題，但是并沒有認(rèn)真分析過是如何適配各種機(jī)型的。目前公司用的是手淘的進(jìn)行頁面適配的。手淘那個(gè)還有的地方看不懂，還是自己太了，但是看不懂車不影響老司機(jī)開車。 做移動(dòng)端頁面以來，經(jīng)常會(huì)聽說移動(dòng)端的適配這個(gè)問題，但是并沒有認(rèn)真分析過是如何適配各種機(jī)型的。目前公司用的是手淘的flexible.js進(jìn)行頁面適配的。適配的根本原理其實(shí)就是將設(shè)計(jì)稿按一定的...
閱讀 1471·2021-09-30 09:57
閱讀 1480·2021-09-09 09:33
閱讀 2246·2021-09-04 16:40
閱讀 1811·2021-09-01 10:50
閱讀 3257·2021-09-01 10:31
閱讀 2549·2019-08-30 15:56
閱讀 2980·2019-08-30 15:44
閱讀 3484·2019-08-29 17:29
