|
原來我一直以為Web頁面中的滾動(dòng)條寬度是不能精確確定的，因?yàn)橛脩糇约嚎梢栽谧烂鎸傩灾性O(shè)置系統(tǒng)滾動(dòng)條的寬度為任意整數(shù)。再加之上次在MyMsn的代碼里看見M$程序員的注釋，更加讓我認(rèn)為滾動(dòng)條的寬度是不能精確計(jì)算地。但事實(shí)是怎么樣的呢？ 實(shí)際上對(duì)于HTML里面的容器元素，它們的長、寬之間存在這樣的運(yùn)算關(guān)系： width = border-left-width + clientWidth + border-right-width; height = border-top-width + clientHeight + border-bottom-width; 但是當(dāng)容器內(nèi)出現(xiàn)滾動(dòng)條后，這個(gè)長、寬運(yùn)算關(guān)系將變?yōu)椋?BR> width = border-left-width + clientWidth + scrollbar-width + border-right-width; height = border-top-width + clientHeight + scrollbar-width + border-bottom-width; 下面是一個(gè)DIV的示例：style="margin: 25px; padding: 25px; width: 200px; height: 200px; border: solid 25px blue; background-color: yellow; overflow: scroll;"。
DIV: clientWidth: 130 DIV: offsetWidth: 200 上面示例中的scrollbar-width為：offsetWidth - borderLeftWidth - borderRightWidth - clientWidth = 200px - 25px - 25px - 130px = 20px。 |
|
|
