jquery BS,dialog control adaptive size_jquery

The style was a bit ugly, so I redid it. However, when it was finished, I found that it didn't work properly on IE and couldn't implement adaptive size.

It turns out that it requires xhtml, and the company's products are html. To this end, the implementation of adaptive size was studied.

I have always thought that jquery is very magical to get the width and height. It turns out that it directly gets the offsetWidth/offsetHeight and other attributes of the element in the dom. When an element is inserted into the dom, the browser will calculate the corresponding attributes according to the rules. Here are some related attributes.

scrollWidth is the width of the actual content of the object, excluding the edge width, and will change with the amount of content in the object (too much content may change the actual width of the object).

clientWidth is the visible width of the object, excluding scroll bars and other edges, and will change with the display size of the window.

offsetWidth is the visible width of the object, including scroll bars and other edges, and will change with the display size of the window.

clientWidth, offsetWidth, clientHeight.. Difference



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
(It needs to be mentioned: the margin attribute in CSS has nothing to do with clientWidth, offsetWidth, clientHeight, and offsetHeight)

offsetwidth: is the offset width of the element relative to the parent element. Equal to border padding width
clientwidth: is the visible width of the element. Equal to padding width
scrollwidth: is the width of the element and includes the scrolling part.

Researched the reasons why it cannot be implemented. It turns out that the jquery.alerts control is full of divs. In simple HTML in IE, the width of the div does not seem to increase according to the internal content. It is as large as it is. The offsetWidth obtained in this way is very large. Adapting to the size is not implemented. Of course, in the case of XHTML, offsetWidth is sufficient.

After looking at the implementation of EXT, it is much smarter. The internal content uses span and other el that change with the content size. In this way, the offset attribute is obtained, and then the width of each internal el is Add, including padding and border, to calculate the total width of the outer layer.

Although I also want to simply use xhtml, but there is no other way. It’s better to learn EXT. Although it is more troublesome, it is reliable.