jquery BS,dialog控制項自適應大小

來源:互聯網
上載者:User

樣式有點醜,為此,還重搞了個樣式,哪知以為完工的時候,發現IE上工作不正常,自適應大小等無法實現。

原來它需要xhtml才行,而公司的產品是html的。為此,研究了一下自適應大小的實現。

原來一直覺得jquery取寬度高度很神奇,原來是直接取的dom中element的offsetWidth/offsetHeight等屬性,當有element插入dom中,瀏覽器就會根據規則計算出相應的屬性,這裡抄幾個相關的屬性。

scrollWidth 是對象的實際內容的寬,不包邊線寬度,會隨對象中內容的多少改變(內容多了可能會改變對象的實際寬度)。

clientWidth 是對象可見的寬度,不包捲軸等邊線,會隨視窗的顯示大小改變。

offsetWidth 是對象的可見寬度,包捲軸等邊線,會隨視窗的顯示大小改變。

clientWidth、offsetWidth、clientHeight..區別

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均無關)

offsetwidth:是元素相對父元素的位移寬度。等於border+padding+width
clientwidth:是元素的可見寬度。等於padding+width
scrollwidth:是元素的寬度且包括滾動部分。

研究了下實現不了的原因。原來是jquery.alerts控制項裡面全是div的,簡單的HTML在IE裡,div的寬度似乎不根據內部內容變大而變大,直接有多大就多大,這樣取到的offsetWidth就很大了,自適應大小就沒實現,當然XHTML的情況取offsetWidth就可以了。

看了下EXT的實現方式,它就聰明多了,內部內容用span等隨內容大小變化的el,這樣取到offset屬性就真實了,然後將內部一個個el的寬度都加上,包括padding和border,算出外層的總寬度。

雖然也想簡單用xhtml,但沒辦法。還是學EXT,雖然麻煩一些,但可靠。

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.