快捷導(dǎo)航

jquery BS,dialog控件自適應(yīng)大小

更新時(shí)間：2009年07月06日 13:19:45 作者：

今天準(zhǔn)備用jquery.alerts的開(kāi)源控件，基于jquery的，代碼很少，很容易就搞定。

樣式有點(diǎn)丑，為此，還重搞了個(gè)樣式，哪知以為完工的時(shí)候，發(fā)現(xiàn)IE上工作不正常，自適應(yīng)大小等無(wú)法實(shí)現(xiàn)。

原來(lái)它需要xhtml才行，而公司的產(chǎn)品是html的。為此，研究了一下自適應(yīng)大小的實(shí)現(xiàn)。

原來(lái)一直覺(jué)得jquery取寬度高度很神奇，原來(lái)是直接取的dom中element的offsetWidth/offsetHeight等屬性，當(dāng)有element插入dom中，瀏覽器就會(huì)根據(jù)規(guī)則計(jì)算出相應(yīng)的屬性，這里抄幾個(gè)相關(guān)的屬性。

scrollWidth 是對(duì)象的實(shí)際內(nèi)容的寬，不包邊線寬度，會(huì)隨對(duì)象中內(nèi)容的多少改變（內(nèi)容多了可能會(huì)改變對(duì)象的實(shí)際寬度）。

clientWidth 是對(duì)象可見(jiàn)的寬度，不包滾動(dòng)條等邊線，會(huì)隨窗口的顯示大小改變。

offsetWidth 是對(duì)象的可見(jiàn)寬度，包滾動(dòng)條等邊線，會(huì)隨窗口的顯示大小改變。

clientWidth、offsetWidth、clientHeight..區(qū)別

IE6.0、FF1.06+：
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
IE5.0/5.5：
clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height
(需要提一下：CSS中的margin屬性，與clientWidth、offsetWidth、clientHeight、offsetHeight均無(wú)關(guān))

offsetwidth:是元素相對(duì)父元素的偏移寬度。等于border+padding+width
clientwidth：是元素的可見(jiàn)寬度。等于padding+width
scrollwidth:是元素的寬度且包括滾動(dòng)部分。

研究了下實(shí)現(xiàn)不了的原因。原來(lái)是jquery.alerts控件里面全是div的，簡(jiǎn)單的HTML在IE里，div的寬度似乎不根據(jù)內(nèi)部?jī)?nèi)容變大而變大，直接有多大就多大，這樣取到的offsetWidth就很大了，自適應(yīng)大小就沒(méi)實(shí)現(xiàn)，當(dāng)然XHTML的情況取offsetWidth就可以了。

看了下EXT的實(shí)現(xiàn)方式，它就聰明多了，內(nèi)部?jī)?nèi)容用span等隨內(nèi)容大小變化的el，這樣取到offset屬性就真實(shí)了，然后將內(nèi)部一個(gè)個(gè)el的寬度都加上，包括padding和border，算出外層的總寬度。

雖然也想簡(jiǎn)單用xhtml，但沒(méi)辦法。還是學(xué)EXT，雖然麻煩一些，但可靠。