clientWidth offsetWidth innerWidth difference (summary window size)

from：http://www.cnblogs.com/youxin/archive/2012/09/21/2697514.html

scrollWidth
The actual content of the object width, width of the line does not include, the number will vary with changes in the target content (content more than the actual width of the objects may change).
clientWidth
The width of the object is visible, does not include scroll bars edges, will change with the viewing window。
offsetWidth
Width is visible, scroll bars package edge object, will be displayed with the size of the window changes.

And a scrollWidth clientWidth examples:
<html>
<head>
<Title> 77.htm file </ title>
</head>
<body>
<textarea wrap="off" onfocus="alert('scrollWidth:'+this.scrollWidth+'\n clientWidth:'+this.clientWidth);"></textarea>
</body>
</html>
Typing in the text box, when the value of the former did not come out and clientWidth scrollWidth horizontal scrollbar is the same. When the content exceeds the line width of the text box, scroll bar laterally out there, scrollWidth values had changed.
scrollWidth width of the object is the actual content.
clientWidth width (free edge) of the object seen, this example does not change.

A clientWidth and offsetWidth examples:
<html>
<head>
<Title> 77.htm file </ title>
</head>
<body>
<textarea wrap="off" onfocus="alert('offsetWidth:'+this.offsetWidth+'\n clientWidth:'+this.clientWidth);"></textarea>
</body>
</html>
OffsetWidth value is always greater than the value of clientWidth。
clientWidth width (free edge) of the object seen
offsetWidth width of the object is seen (including the edges, such as the width occupied by the scroll bar)

turn:

Summed up the night, through the observation of IE DevToolbar and Firebug, draw the two figures to distinguish offsetWidth clientWidth scrollWidth scrollTop scrollLeft attributes such nuances, and I hope you write js help!

OEvent first graph object is a parameter of a time of occurrence, and IE is obtained in the FF method Needless to say it. The whole background is all sizes, the middle of the small box is the browser on this page in the visible size. This figure is for each height for the document (document) is, width, top, left instructions did.

The second figure is to specify the property value for each page in a div done. "DIV element client area" is the visible area of the div element, "scroll area" is the div content of the original size, but its contents, so there are no place for a scroll bar width due to the height of the css div set.

(Page width is limited, the picture may not be displayed completely, it is best to open a new window open picture)

window object:

(1) innerHeight attributes: height of the display area of the document window, not including part of the menu bar, toolbar and so on. This property is readable and writable.

IE does not support this property, clientHeight IE properties in the same body element properties.

(2) innerWidth properties: the width of the document display window area, likewise, without borders. This property is readable and writable.

IE does not support this property, clientWidth IE properties in the same body element properties.

clientHeight and clientWidth property is read-only.

Further, IE does not support outerWidth, outerHeight properties.

(3) pageXOffset attribute: Integer read-only property representing the number of pixels document scroll right off.

IE does not support this property, use of property scrollLeft body element instead.

(4) pageYOffset attribute: Integer read-only property representing the number of pixels to scroll down through the document.

IE does not support this property, use of property scrollTop body element instead.

Compatible with IE DOM browser,How to obtain the document display window width and height of the regionUse:? Conditional statements, as follows:

windows.innerWidth ? windows.innerWidth : document.body.clientWidth;

windows.innerHeight ? windows.innerHeight : document.body.clientHeight;

Element object:

offsetLeft, offsetTop property: Gets the element coordinates relative to the upper left corner of the document.

----------------------------------------

When displayed before a bug under a modified IE6, I found these, attached to this memo, the latter gives a detailed description of the previous version, not description carefully, especially hope we all collections under.

Page wide visible region: document.body.clientWidth;
Highly visible page area: document.body.clientHeight;
Page wide visible region: document.body.offsetWidth (including edge width);
High visible area page: document.body.offsetHeight (including edge width);
Full body of the page width: document.body.scrollWidth;
Body of the page GAO: document.body.scrollHeight;
Page volume to be high: document.body.scrollTop;
Web is rolled to the left: document.body.scrollLeft;
On the body of the page: window.screenTop;
The body of the page left: window.screenLeft;
High screen resolution: window.screen.height;
Wide screen resolution: window.screen.width;
Screen available work area height: window.screen.availHeight;

Workspace screens are available Width: window.screen.availWidth;

1、offsetLeft

Assume that obj is an HTML control.

obj.offsetTop obj refers to the location or distance above the upper control, integer pixels.

obj.offsetLeft means obj distance left or upper position control, integer pixels.

obj.offsetWidth means obj width control itself, integer pixels.

obj.offsetHeight obj control itself refers to the height of integer pixels.

We make a description of the aforementioned "above or upper" and "left or upper" control.

E.g:
<div id="tool">
<Input type = "button" value = "Submit">
<Input type = "button" value = "reset">
</div>

"Submit" button offsetTop means "submit" button from the upper layer borders "tool" of distance, because from its top most recently on the border "tool" layer.
"Reset" button offsetTop means "Reset" button from the upper layer borders "Tool" distance from its upper edge as is the nearest border "Tool" layer.

"Submit" button offsetLeft means "submit" button from the "tool" layer from the left border, because it left from the latest of which was left border "tool" layer.
"Reset" button offsetLeft refers to "reset" button from the "Submit" button to the right from the box, because it left from the latest of which was the "Submit" button to the right of the box.

The above properties are also effective in FireFox.

Also: we are talking about here refers to the property value HTML controls, not document.body, value document.body have different interpretations in different browsers (in fact most of the environment is due to explain the different causes of document.body not because of the offset caused by different interpretation), click here to see the differences.
Title: The difference between the offsetTop and style.top

Prerequisites: offsetTop, offsetLeft, offsetWidth, offsetHeight

We know offsetTop can get the HTML element from a position above or outer elements, style.top also possible, the difference between the two is:

One,offsetTop returns the number, and the string is returned style.top, except figures with further units: px.

two, The offsetTop read-only, read-write and style.top.

Third, if there is no element to specify HTML style over top, then style.top returns an empty string.

offsetLeft and style.left, offsetWidth and style.width, offsetHeight and style.height is the same reason.
Title: clientHeight, offsetHeight and scrollHeight

We are here to talk about the four kinds of explanation browser document.body of clientHeight, offsetHeight and scrollHeight, where document.body say is, if it is HTML controls, then there are different, click here.

These four browsers are IE (Internet Explorer), NS (Netscape), Opera, FF (FireFox).

-------------------------------

This paper re-analyzed the clientHeight, offsetHeight, scrollHeight three properties and performance differences in different browsers

Compatibility, in particular compatibility of these things is very complex, for simplicity, it is recommended readingDocument.body document.documentElement talk with the scrollWidth, offsetWidth, clientWidth This article.

We are here to talk about the four kinds of browsersdocument.bodyExplained clientHeight, offsetHeight and scrollHeight, and said here is document.body, if it is HTML controls, then there are different,click hereView.

These four browsers are IE (Internet Explorer), NS (Netscape), Opera, FF (FireFox).

IMPORTANT end of the text is more important, please note.

Read reviews, many of my friends, to my description still very confused, so I made the following chart to help understand.

From the figure, we can see a browser window, the window is dragged me deliberately small, thus forming a scroll bar, so the top of the page contents hidden in the window above the bottom of the page content hidden in the window below.

clientHeight, offsetHeight and scrollHeight can generally be explained (for details, please read the contents of the back carefully):

FIG clientHeight white piece height.
offsetHeight, scrollHeight figure + + shaded portion on the white part of the shadow, that is, the height of the page content.
by the way,That the shaded area (the top one black gradient), is scrollTop.

clientHeight
We do not have any objection to clientHeight, it is considered to be highly visual area, meaning the browser page can be seen in the height of the content area, usually last a toolbar to the area above the status bar, regardless of the page content.

offsetHeight
IE, Opera considered offsetHeight = clientHeight + scroll bar + border.
NS, FF think offsetHeight web content is the actual height, may be less than clientHeight.

scrollHeight
IE, Opera web content is considered scrollHeight actual height, may be less than clientHeight.
NS, FF scrollHeight is considered the height of web content, but the minimum is clientHeight.

general speaking
clientHeight is to look at the height of the content area of the browser.
NS, FF think offsetHeight and scrollHeight are highly web content, web content only when the height of less than or equal clientHeight, scrollHeight value is clientHeight, and offsetHeight may be less than clientHeight.
IE, Opera considered offsetHeight is viewable area clientHeight scroll bar plus borders. scrollHeight web content is the actual height.

have a test

Test file。

general speaking

clientHeight is to look at the height of the content area of the browser.

NS, FF think offsetHeight and scrollHeight are highly web content, web content only when the height of less than or equal clientHeight, scrollHeight value is clientHeight, and offsetHeight may be less than clientHeight.

IE, Opera considered offsetHeight is viewable area clientHeight scroll bar plus borders. scrollHeight web content is the actual height.

Similarly

Explained clientWidth, offsetWidth and scrollWidth same as above, except that the height can be replaced by a width.

important

These are without a DOCTYPE specified, if designated as a DOCTYPEXHTMLSuch as: DTD XHTML 1.0 Transitional, the meaning would be different,In this case these three values are the same values, have said the actual height of the content (and do not care how high the window).

That again, the time of writing, Chrome browser has not come out, then I tested Chrome in specified circumstances when XHTML DOCTYPE is, really BT, it's the same clientHeight and offsetHeight value, expressed content of the actual height (and do not care how high window), scrollHeight is another set of do not know what stuff, in short, this is it, and IE, Firefox different wants.

Well, come back, in case if you want to specify DOCTYPE to XHTML, explains Yao An article at the beginning (ie clientHeight, offsetHeight, scrollHeight different meaning) to apply, how to do it? The answer is: the application together document.body and document.documentElement, such as: document.documentElement.scrollLeft || document.body.scrollLeft (generally document.documentElement EDITORIAL), similar applications, see:http://www.cftea.com/c/2008/06/U1FSRIC247DWTK2M.asp。

Transfer;http://www.cftea.com/c/751.asp

Similarly
Explained clientWidth, offsetWidth and scrollWidth same as above, except that the height can be replaced by a width.

=======================================================================

ClientHeight and the difference offsetHeight

Many articles have been introduced and the difference between clientHeight offsetHeight, is clientHeight value does not include the height of the scrollbar, and the value offsetHeight include highly scrollbar. However, the value of offsetHeight clientHeight and in the end what constitutes it? How to calculate the value of these two numbers?

1. clientHeight offsetHeight value and by what decision?

If we have the following DIV, the text of the main display as "This is the main body of DIV".

As shown above, the value is determined by padding clientHeight value and the actual height of the CSS DIV contents, the value is determined by the height offsetHeight actual height DIV content, padding values in CSS, and the border value DIV ScrollBar; as margin values in CSS, it will not affect the value of clientHeight and offsetHeight.

Height value of 2. CSS have any effect on clientHeight and offsetHeight?

First, let's look at the CSS Height define what height. As the final part of this article "APPENDIX Sample Code" (Note: hereinafter referred to as "sample code") in, innerDIVClass the Height value to 50px, shown in IE calculated values are as follows. That is, in IE, CSS the DIV Height value defines the height (i.e., the value offsetHeight) comprises a padding including; inside in Firefox, CSS Height value of the height of the actual content DIV defined only, and no padding this value is included in the inside (70 = 50 + 10 * 2).

in IE:
innerDiv.clientHeight: 46
innerDiv.offsetHeight: 50
outerDiv.clientHeight: 0
outerDiv.offsetHeight: 264

in Firfox:
innerDiv.clientHeight: 70
innerDiv.offsetHeight: 74
outerDiv.clientHeight: 348
outerDiv.offsetHeight: 362

In the example above, you might wonder why outerDiv.clientHeight a value of 0 in IE. That is because the sample code is not defined outerDIVClass Height value, then, in IE, the clientHeight value can not be calculated. Also, in the sample code, if the Height innerDIVClass the last value, the value is also 0 innerDIV.clientHeight. (Note: This does not exist in Firefox).

If the CSS DIV Height value is less than the height of the time for it (when the behavior is not defined in the CSS overflow of) the content to be displayed? In IE, the clientHeight whole (or the offsetHeight) value of no effect, the DIV will automatically stretch; in which Firefox, the DIV will not be spanned. As in the example code, the value of innerDivClass Height is set to 0, the calculated results are shown below. IE is softened inside DIV, which clientHeight content equal height and padding * 2; and Firefox inside the boundary word overflow DIV, which is exactly twice the value clientHeight padding value.

In IE:
innerDiv.clientHeight: 38
innerDiv.offsetHeight: 42
outerDiv.clientHeight: 0
outerDiv.offsetHeight: 256

In Firefox:
innerDiv.clientHeight: 20
innerDiv.offsetHeight: 24
outerDiv.clientHeight: 298
outerDiv.offsetHeight: 312

<html>
<head>
<style type="text/css">......
.innerDivClass
{...}{...}{...}{
       color: red;
       margin: 37px;
       padding: 10px;
       border: 2px solid #000000;
       height: 50px;


}
.outerDivClass
{...}{...}{...}{
       padding: 100px;
       margin: 200px;
       border: 7px solid #000000;
}
</style>

<script>......
function checkClientHeight()
......{
      var innerDiv = document.getElementById("innerDiv");
      var outerDiv = document.getElementById("outerDiv");

       result.innerHTML = "innerDiv.clientHeight: " + innerDiv.clientHeight + "<br />";
       result.innerHTML += "innerDiv.offsetHeight: " + innerDiv.offsetHeight + "<br />";
       result.innerHTML += "outerDiv.clientHeight: " + outerDiv.clientHeight + "<br />";
       result.innerHTML += "outerDiv.offsetHeight: " + outerDiv.offsetHeight + "<br />";
}
</script>
</head>
<body>
<div id="outerDiv" class="outerDivClass">
<div class="innerDivClass" id="innerDiv">
Hello world.          
</div>
</div>
<p></p>
<div id="result">
</div>
<input type="button" onclick="checkClientHeight()" text="Click Me" Value="Click Me" />
</body>
</html>

-------------------------------------------------

scrollTop、scrollLeft、scrollWidth、scrollHeight

The above is a web page, due to the limitations window deadline is not fully displayed, not showing up, shaded marked.

The shadow is scrollTop;
The shadow + white + shadow is scrollHeight.

scrollTop the "roll" up the value of height, examples:

<div style="width:200px;height:200px;background-color:#999999;overflow:hidden;" id="p">
<Div style = "width: 100px; height: 300px; background-color: # FFFF00;" id = "t"> scrollTop If set to p, the content may not be completely displayed. </ Div>
</div>
<script type="text/javascript">

</script>

scrollTop、scrollLeft

Due toOuter element p(Note thatpIt is nott)already setup scrollTop,and soThe inner elementWill be up "volume", which is rolled up partscrollTop。

scrollLeft also similar reason.

scrollWidth、scrollHeight

wehave already known offsetHeight YesElement itselfHeight, andscrollHeight YesThe inner elementThe actual height +Outer elementpadding, the inner layer portion contains a hidden element.

Abovep(Note thatpIt is nott)of offsetHeight200, and itsscrollHeight300.If p has padding, the padding should then be considered to scrollHeight but its border, margin should not be counted.

scrollHeight also similar reason.

Full support for FireFox and IE, but Netscape 8 (very old) and Opera 7.6 (very old) does not support scrollTop, scrollLeft (document.body.scrollTop, except document.body.scrollLeft).

Editor:http://www.cftea.com/c/2006/12/WOYNSH75QM4NPFRS.asp

offsetTop scroolTop difference:

offsetTop:Current object from its top to the upper layer.

Distance can not be assigned. Set Object to the top of the page, please use style.top property.

scrollTop:
From the top-most object is the range to the object in the current window displayed top edge．
That is the case in the event of a vertical scroll bar, scroll bar pulled away.

one example:

window.onload=function(){
 
    var obj=document.getElementById("p");
    obj.innerHTML='offsetTop:'+obj.offsetTop+'<br/>'+
                 'scrollTop:'+obj.scrollTop+'<br/>'+
                  'offsetHeigh:'+obj.scrollHeight;
};
<body>
sfsafa
<div style="width:200px;height:200px;background-color:#999999;overflow:hidden;" id="p">
</div>
</body>

obj says:

sfsafa

offsetTop:18
scrollTop:0
offsetHeigh:300

You can see, scrollTop only a scroll bar to scroll height, and it is offsetTop distance relative to the parent element.

1.offsetTop :
Current object from its top to the upper layer.
It can not be assigned. Setting object to the distance from the top of the page, please use style.top property.

2.offsetLeft :
Current object to the left from its higher layer.
It can not be assigned. Setting the distance to the object left part of the page, please use style.left property.

3.offsetWidth :
The current width of the object.
In that the difference between style.width attributes: setting target values such as the width of the percentage of the width, regardless of the page becomes larger or smaller, style.width return this percentage, the width value offsetWidth objects in different pages and returns not a percentage value

4.offsetHeight :
In that the difference between style.height attributes: setting target value as a percentage of the width of the height, regardless of the page becomes larger or smaller, this percentage style.height return, and height values offsetHeight objects in different pages and returns not a percentage value

5.offsetParent :
The current higher layer objects objects.
Note. If the object is included in a DIV, then this will not be taken as DIV higher layer of the object, (i.e., higher layer of the object the object will skip DIV) is a higher layer presents no problem when the Table.
With this property, you can get the current absolute position of the object in different sizes page.

Get the absolute position.

function GetPosition(obj)
 2{
 3    var left = 0;
 4    var top  = 0;
 5
 6    while(obj != document.body)
 7    {
 8        left = obj.offsetLeft;
 9        top  = obj.offsetTop;
10
11        obj = obj.offsetParent;
12    }
13
14    alert("Left Is : " + left + "\r\n" + "Top  Is : " + top);
15}

6.scrollLeft :
Leftmost object distance to an object in the range of the currently displayed window on the left.
That is the case in the event of horizontal scroll bar, scroll bar pulled away.

7.scrollTop
From the top edge of the top-most object to the object in the range of the currently displayed window.
That is the case in the event of a vertical scroll bar, scroll bar pulled away.

Intelligent Recommendation

JS gets the browser window size clientWidth, offsetWidth, scrollWidth

Commonly used: JS gets the browser window size detailed: About getting the window size of various browsers: In my local test: can be used under IE, FireFox, Opera document.body.clientWidth docu...

DOM element size and position related attributes (clientWidth, offsetWidth, scrollWidth...) summary

Original intention Since the position and size of the DOM element is easily confused with the knowledge of mouse events, it is necessary to summarize it separately and do not want to save the screensh...

Graphic offsetWidth, clientWidth, scrollWidth, innerWidth, outerWidth, pageXOffset, etc.

Different browsers: ** First, test 1: offsetWidth, clientWidth and scrollWidth of the dom object when there is no scroll bar (1) Test code** (2) Test results Under IE7, scrollWidth = 20, scrollHeight ...

dom element clientWidth offsetWidth scrollWidth value and innerWidth value

Let’s go to the code first. I was dizzy after reading various articles on the Internet. Experimental equipment: Chrome browser, 1920x1080 screen Under normal circumstances: clientWidth：520 offse...

The difference between scrollWidth, clientWidth, offsetWidth

scrollWidth: The width of the actual content of the object, without the width of the edge, will become larger as the content of the object exceeds the visible area. clientWidth: The width of the visib...

clientWidth offsetWidth innerWidth difference (summary window size)

scrollTop、scrollLeft、scrollWidth、scrollHeight

Intelligent Recommendation

JS gets the browser window size clientWidth, offsetWidth, scrollWidth

DOM element size and position related attributes (clientWidth, offsetWidth, scrollWidth...) summary

Graphic offsetWidth, clientWidth, scrollWidth, innerWidth, outerWidth, pageXOffset, etc.

dom element clientWidth offsetWidth scrollWidth value and innerWidth value

The difference between scrollWidth, clientWidth, offsetWidth

More Recommendation

The difference between scrollWidth, clientWidth, offsetWidth;

The difference between width (), outerWidth, innerWidth, clientWidth

DOM element size offsetwidth, scrollwidth, clientwidth, etc.

CSS position size is high (Width, ClientWidth, OffsetWidth)

DOM element size: offsetwidth, ClientWidth, ScrollWidth

Copyright DMCA © 2018-2026 - All Rights Reserved - www.programmersought.com User Notice