JS gets the browser and screen width and height information code
- 2020-03-30 02:28:32
- OfStack
Page visible region wide: document. Body. ClientWidth
High page visible area: the document. The body. ClientHeight
Page visible region wide: document. Body. OffsetWidth (including line width)
High page visible area: the document. The body. OffsetHeight (including line width)
Page of text in full width: document. Body. ScrollWidth
High page of text in full: document. Body. ScrollHeight
Web pages are scroll high: document.body.scrolltop
Page is scroll to the left: document.body.scrollleft
In the body of the page: window.screentop
Page body left: window.screenLeft
High screen resolution: window.screen.height
Width of screen resolution: window.screen.width
Screen available workspace height: window. Screen. AvailHeight
Screen available workspace width: window.screen.availwidth
HTML precise positioning: scrollLeft scrollWidth, clientWidth, offsetWidth
ScrollHeight: gets the scrolling height of the object.
ScrollLeft: sets or gets the distance between the left edge of the object and the leftmost end of the currently visible content in the window
ScrollTop: sets or gets the distance between the top of the object and the top of the visible content in the window
ScrollWidth: gets the scrolling width of the object
OffsetHeight: gets the height of the object relative to the layout or the parent coordinate specified by the parent offsetParent property
OffsetLeft: gets the calculated left position of the object relative to the layout or parent coordinates specified by the offsetParent attribute
OffsetTop: gets the calculated top position of the object relative to the layout or parent coordinates specified by the offsetTop attribute
Event.clientx horizontal coordinates relative to the document
The vertical coordinates of event.clienty relative to the document
The horizontal coordinates of event.offsetx relative to the container
The vertical coordinates of event.offsety relative to the container
Document. The documentElement. ScrollTop vertical scrolling
Event. ClientX + document. DocumentElement. ScrollTop relative document of the amount of horizontal coordinate + vertical scrolling
The differences between IE and FireFox are as follows:
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
(note: margin property in CSS, independent of clientWidth, offsetWidth, clientHeight, offsetHeight)
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
The main technical points
The code in this section mainly USES some properties of the Document object about the window. The main functions and usage of these properties are as follows.
To get the size of the Window, you need to use different properties and methods for different browsers: to detect the real size of the Window, you need to use the properties of the Window under Netscape; Under IE, we need to go deep into the Document to detect the body. In the DOM environment, to get the size of the window, you need to pay attention to the size of the root element, not the element.
The innerWidth property of the Window object contains the innerWidth of the current Window. The innerHeight attribute of the Window object contains the innerHeight of the current Window.
The body attribute of the Document object corresponds to the tag of the HTML Document. The documentElement attribute of the Document object represents the root node of the HTML Document.
Document. Body. ClientHeight said HTML document in the current height of the window. Document.body.clientwidth represents the current width of the window in which the HTML document resides.
Implementation code < ! -- -- file name: 30.3.htm -- -- >
Source program interpretation
(1) the program first establishes a form, containing two text boxes, to display the current width and height of the window, and its value will change with the change in the window size.
(2) in the following JavaScript code, two variables, winWidth and winHeight, were first defined to save the height and width of the window.
(3) then, in the function findDimensions (), use window.innerheight and window.innerwidth to get the height and width of the window, and store both in the preceding two variables.
(4) further detect the body by going deep into the Document to obtain the window size and store it in the two variables mentioned above.
(5) at the end of the function, the result is output to two text boxes by accessing the form elements by name.
(6) at the end of the JavaScript code, complete the operation by calling the findDimensions () function.
High page visible area: the document. The body. ClientHeight
Page visible region wide: document. Body. OffsetWidth (including line width)
High page visible area: the document. The body. OffsetHeight (including line width)
Page of text in full width: document. Body. ScrollWidth
High page of text in full: document. Body. ScrollHeight
Web pages are scroll high: document.body.scrolltop
Page is scroll to the left: document.body.scrollleft
In the body of the page: window.screentop
Page body left: window.screenLeft
High screen resolution: window.screen.height
Width of screen resolution: window.screen.width
Screen available workspace height: window. Screen. AvailHeight
Screen available workspace width: window.screen.availwidth
HTML precise positioning: scrollLeft scrollWidth, clientWidth, offsetWidth
ScrollHeight: gets the scrolling height of the object.
ScrollLeft: sets or gets the distance between the left edge of the object and the leftmost end of the currently visible content in the window
ScrollTop: sets or gets the distance between the top of the object and the top of the visible content in the window
ScrollWidth: gets the scrolling width of the object
OffsetHeight: gets the height of the object relative to the layout or the parent coordinate specified by the parent offsetParent property
OffsetLeft: gets the calculated left position of the object relative to the layout or parent coordinates specified by the offsetParent attribute
OffsetTop: gets the calculated top position of the object relative to the layout or parent coordinates specified by the offsetTop attribute
Event.clientx horizontal coordinates relative to the document
The vertical coordinates of event.clienty relative to the document
The horizontal coordinates of event.offsetx relative to the container
The vertical coordinates of event.offsety relative to the container
Document. The documentElement. ScrollTop vertical scrolling
Event. ClientX + document. DocumentElement. ScrollTop relative document of the amount of horizontal coordinate + vertical scrolling
The differences between IE and FireFox are as follows:
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
(note: margin property in CSS, independent of clientWidth, offsetWidth, clientHeight, offsetHeight)
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --
The main technical points
The code in this section mainly USES some properties of the Document object about the window. The main functions and usage of these properties are as follows.
To get the size of the Window, you need to use different properties and methods for different browsers: to detect the real size of the Window, you need to use the properties of the Window under Netscape; Under IE, we need to go deep into the Document to detect the body. In the DOM environment, to get the size of the window, you need to pay attention to the size of the root element, not the element.
The innerWidth property of the Window object contains the innerWidth of the current Window. The innerHeight attribute of the Window object contains the innerHeight of the current Window.
The body attribute of the Document object corresponds to the tag of the HTML Document. The documentElement attribute of the Document object represents the root node of the HTML Document.
Document. Body. ClientHeight said HTML document in the current height of the window. Document.body.clientwidth represents the current width of the window in which the HTML document resides.
Implementation code < ! -- -- file name: 30.3.htm -- -- >
<!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">
<head>
<title> Please adjust the browser window </title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
</head>
<body>
<h2 align="center"> Please resize the browser window </h2><hr>
<form action="#" method="get" name="form1" id="form1">
<! The display displays the actual size of the browser window >
Browser window the The actual height : <input type="text" name="availHeight" size="4"><br>
Browser window the The actual width of the : <input type="text" name="availWidth" size="4"><br>
</form>
<script type="text/javascript">
<! �
var winWidth = 0;
var winHeight = 0;
function findDimensions() //Function: gets the size
{
//Get window width
if (window.innerWidth)
winWidth = window.innerWidth;
else if ((document.body) && (document.body.clientWidth))
winWidth = document.body.clientWidth;
//Get window height
if (window.innerHeight)
winHeight = window.innerHeight;
else if ((document.body) && (document.body.clientHeight))
winHeight = document.body.clientHeight;
//Get the window size by detecting the body inside the Document
if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)
{
winHeight = document.documentElement.clientHeight;
winWidth = document.documentElement.clientWidth;
}
//The result is output to two text boxes
document.form1.availHeight.value= winHeight;
document.form1.availWidth.value= winWidth;
}
findDimensions();
//Call the function to get the value
window.onresize=findDimensions;
// � >
</script>
</body>
</html>
Source program interpretation
(1) the program first establishes a form, containing two text boxes, to display the current width and height of the window, and its value will change with the change in the window size.
(2) in the following JavaScript code, two variables, winWidth and winHeight, were first defined to save the height and width of the window.
(3) then, in the function findDimensions (), use window.innerheight and window.innerwidth to get the height and width of the window, and store both in the preceding two variables.
(4) further detect the body by going deep into the Document to obtain the window size and store it in the two variables mentioned above.
(5) at the end of the function, the result is output to two text boxes by accessing the form elements by name.
(6) at the end of the JavaScript code, complete the operation by calling the findDimensions () function.