Today, we are going to use the open-source control of jquery. alerts, which is based on jquery and has little code, so it's easy to do it. The style is a little ugly. For this reason, I re-create a style. When I thought it was finished, I found that the work on IE was abnormal, and the self-adaptive size could not be achieved.
It used to require xhtml, while the company's products were html. To this end, we have studied the implementation of adaptive size.
It turns out that jquery is amazing to take the width and height. It turns out that it is directly taking the offsetWidth/offsetHeight attributes of element in the dom. When element is inserted into the dom, the browser calculates the corresponding attributes based on the rules. Here we copy several related attributes.
ScrollWidth is the width of the actual content of the object. The width of the content changes with the number of content in the object (the actual width of the object may be changed if the content is too large ).
ClientWidth is the visible width of the object. If the value of clientWidth is not set to the same side of the scroll bar, it will change with the display size of the window.
OffsetWidth is the visible width of the object. The package's scroll bar and other edges change with the display size of the window.
Difference between clientWidth, offsetWidth, and clientHeight...
Offsetwidth: the offset width of the element relative to the parent element. Equal to border + padding + width
Clientwidth: the visible width of the element. Equal to padding + width
Scrollwidth: Specifies the width of an element and includes the scrolling part.
The reason for the failure is studied. It turns out to be jquery. the alerts control is full of p. In simple HTML in IE, the width of p does not seem to increase according to the internal content. The size of p is as large as the size of p, in this way, the obtained offsetWidth is very large, and the adaptive size is not implemented. Of course, you can use offsetWidth for XHTML.
After reading the EXT implementation method, it is much more intelligent. The internal content uses the el with the change of content size, such as span, so that the offset attribute is true, add the Interior el widths, including padding and border, to calculate the total width of the outer layer.
Although I want to simply use xhtml, I cannot. Still learn EXT, although troublesome, but reliable.
The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion;
products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the
content of the page makes you feel confusing, please write us an email, we will handle the problem
within 5 days after receiving your email.
If you find any instances of plagiarism from the community, please send an email to:
info-contact@alibabacloud.com
and provide relevant evidence. A staff member will contact you within 5 working days.
