今天准备用jquery.alerts的开源控件，基于jquery的，代码很少，很容易就搞定。 样式有点丑，为此，还重搞了个样式，哪知以为完工的时候，发现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，虽然麻烦一些，但可靠。

评论 (0) All

登陆 还没注册？