jquery BS,dialog控件自适应大小

  样式有点丑,为此,还重搞了个样式,哪知以为完工的时候,发现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,虽然麻烦一些,但可靠。