Home > Developer > JavaScript
Visible area width of the webpage: Document. Body. clientwidth;
Visible area height: Document. Body. clientheight;
Visible area height: Document. Body. offsetweight:
Visible area height: Document. Body. offsetheight;
Full text width of the webpage: Document. Body. scrollwidth;
Webpage text height: Document. Body. scrollheight;
The height of the page to be rolled: Document. Body. scrolltop;
Left of the webpage to be rolled: Document. Body. scrollleft;
Page body: window. screentop;
Page body part left: window. screenleft;
Screen Resolution Height: window. Screen. height;
Screen Resolution width: window. Screen. width;
Available screen workspace Height: window. Screen. availheight;
Available screen workspace width: window. Screen. availwidth;
Scrollwidth
It is the width of the actual content of the object. The width of the content in the object varies with the number of elements in the object. If the content is too large, the actual width of the object may be changed)
Clientwidth
It is the visible width of the object. If it 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.
------------------------------------------------
An example of scrollwidth and clientwidth:
<HTML>
<Head>
<Title> 77.htm file </title>
</Head>
<Body>
<Textarea wrap = "off" onfocus = "alert ('rollwidth: '+ this. scrollwidth +' \ n clientwidth: '+ this. clientwidth);"> </textarea>
</Body>
</Html>
Enter the content in the text box. The value of scrollwidth and clientwidth is the same before the horizontal scroll bar does not come out.
When a row of content exceeds the width of the text box, a horizontal scroll bar is displayed, and the value of scrollwidth is changed.
Scrollwidth is the width of the object content.
Clientwidth is the width (excluding the edge) seen by the object, which will not be changed in this example.
-----------------------------------------------
An example of clientwidth and offsetwidth:
<HTML>
<Head>
<Title> 77.htm file </title>
</Head>
<Body>
<Textarea wrap = "off" onfocus = "alert ('offsetwidth: '+ this. offsetwidth +' \ n clientwidth: '+ this. clientwidth);"> </textarea>
</Body>
</Html>
The value of offsetwidth is always equal to the value of clientwidth.
Clientwidth is the width (excluding the edge) seen by the object)
Offsetwidth is the width seen by the object (including the edge, such as the width occupied by the scroll bar)
Top, postop, scrolltop, scrollheight, and offsetheight
1. Top
This attribute is only available when the position attribute of an object is set. Otherwise, this attribute is ignored.
<Div style = "background-color: red; position: absolute; width: 100px; Height: 100px;">
<P style = "background-color: Silver; position: absolute; top:-5px;"> test top </P>
</Div>
Above is a section P included in a div. You can see that after P's top is set to-5px, its top margin exceeds the top margin of the container Div, the above distance is the set 5px.
Note that both Div and P must be set to absolute to get the desired result. If the parent element is not set, then, the reference of the child element will be the element that has defined position on the upper layer until the entire document;
2. postop
The value of postop is actually the same as that of top, but the difference is that the unit of top elements is fixed to PX, postop is only a numerical value (you can use alert ("Top =" + id. style. top) and alert ("postop =" + id. style. so postop is generally used for calculation.
<Div style = "background-color: red; position: absolute; width: 100px; Height: 100px;">
<P id = "test" style = "background-color: Silver; position: absolute;"> test postop </P>
</Div>
<SCRIPT>
Test. style. postop = 15 + 8;
Alert ("Top =" + test. style. Top );
Alert ("postop =" + test. style. postop );
</SCRIPT>
Whether you use top or postop to assign values, the final results are consistent.
3. scrolltop
<Div id = "Container" style = "background-color: Silver; width: 100px; Height: 100px; overflow: auto;">
<P style = "background-color: red;">
Don't be a lover, a cat, a dog, a lover, a pet, at least cute, charming, and you don't have to worry about it. Tomorrow will be yours. </P>
</Div>
<SCRIPT>
Container. scrolltop = 12;
</SCRIPT>
This section of text cannot be fully displayed in the DIV of 100*100. Therefore, if overflow is set to auto, a sliding box in the upper and lower directions appears. If no ID is set. the slider is located at the top by default. After the scrolltop value is set to 12, the position of the slider is changed. By default, the text that has been written in 12 pixels is displayed. If overflow is set to hidden, the top 12 pixels of text cannot be displayed.
Note that the setting method is ID. scrolltop, instead of ID. style. scrolltop.
4. scrollheight and offsetheight
Offsetheight is the height of its own elements, and scrollheight is the height of its own elements + the height of hidden elements.
<Div id = "Container" style = "background-color: Silver; width: 100px; Height: 100px; overflow: auto;">
<P style = "background-color: red; Height: 250px;">
Don't be a lover, a cat, a dog, a lover, a pet, at least cute, charming, and you don't have to worry about it. Tomorrow will be yours. </P>
</Div>
<SCRIPT>
Alert (container. offsetheight );
Alert (container. scrollheight );
</SCRIPT>
Output 100,250 in sequence. Because the height of an element has been specified to be 100px, offsetheight is always 100px; the internal element is 250px, and the container element is only 100px, so there is a 150px content that cannot be displayed, but it actually exists, so the scrollheight value is 100 + 150 = 250.
In addition, document.body.clientwidthand document.doc umentelement. clientwidth have the following differences:
If the W3C standard tag is added to the page:
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns = "http://www.w3.org/1999/xhtml">
In ie:
Document. Body. clientwidth ==> body object width
Document. Body. clientheight ==> body object height
Document.doc umentelement. clientwidth ==> visible area width
Document.doc umentelement. clientheight => visible area height
In Firefox:
Document. Body. clientwidth ==> body object width
Document. Body. clientheight ==> body object height
Document.doc umentelement. clientwidth ==> visible area width
Document.doc umentelement. clientheight => visible area height
?
In opera:
Document. Body. clientwidth ==> visible area width
Document. Body. clientheight ==> visible area height
Document.doc umentelement. clientwidth ==> Page Object width (that is, the width of the body object plus the margin width)
Document.doc umentelement. clientheight ==> Page Object height (that is, the height of the body object plus the margin height)
If W3C standards are not defined
IE:
Document.doc umentelement. clientwidth ==> 0
Document.doc umentelement. clientheight => 0
Firefox:
Document.doc umentelement. clientwidth ==> Page Object width (that is, the width of the body object plus the margin width)
Document.doc umentelement. clientheight ==> Page Object height (that is, the height of the body object plus the margin height)
Opera:
Document.doc umentelement. clientwidth ==> Page Object width (that is, the width of the body object plus the margin width)
Document.doc umentelement. clientheight ==> Page Object height (that is, the height of the body object plus the margin height)
original address: http://thinktank.iteye.com/blog/354667
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
