|
|
Posted on 7/3/2018 4:54:42 PM
|
|
|
Javascrip{filter}t gets the size of the screen, browser window, browser, and web page height and width
Web page visibility area: document.body.clientWidth
Web page visibility area: document.body.clientHeight
Web page visible area width: document.body.offsetWidth (including the width of the edge)
Web page visible area height: document.body.offsetHeight (including the width of the edge)
The full text width of the web page body: document.body.scrollWidth
The full text of the web page is high: document.body.scrollHeight
The page is scrolled high: document.body.scrollTop
The page is scrolled to the left: document.body.scrollLeft
On the body of the web page: window.screenTop
The body of the webpage is 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
jQuery gets various widths and heights
Browser viewing area
$(window).height()
$(window).width()
The document size of the page
$(document).height()
$(document).width()
The size of the current window document body
$(document.body).height()
$(document.body).width()
The vertical height of the scrollbar to the top (i.e. the height at which the page is rolled up)
$(document).scrollTop()
$(document).scrollLeft()
HTML precise targeting: scrollLeft, scrollWidth, clientWidth, offsetWidth
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX relative to the horizontal coordinates of the document
event.clientY relative to the vertical coordinates of the document
event.offsetX relative to the horizontally coordinates of the container
event.offsetY relative to the vertical coordinates of the container
document.documentElement.scrollTop value for vertical scrolling
event.clientX+document.documentElement.scrollTop The amount of horizontal coordinates + vertical scrolling relative to the document
IE, FireFox differences 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
(It should be mentioned: the margin attribute in CSS has nothing to do with clientWidth, offsetWidth, clientHeight, offsetHeight)
Web page visibility area: document.body.clientWidth
Web page visibility area height: document.body.clientHeight
Web page visible area width: document.body.offsetWidth (including the width of the edge)
Web Visible Area Height: document.body.offsetHeight (including the height of the edges)
The full text width of the web page: document.body.scrollWidth
Full text height: document.body.scrollHeight
The page is scrolled high: document.body.scrollTop
The page is scrolled to the left: document.body.scrollLeft
On the body of the web page: window.screenTop
Left of the body of the web page: 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
div.style.top: The top distance relative to the component where the div is located
－－－－－－－－－－－－－－－－－－－
Technical highlights
The code in this section mainly uses some properties of the Document object about the window, and the main functions and usage of these properties are as follows.
To get the size of a window, different properties and methods need to be used for different browsers: to detect the true size of a window, you need to use the property of Window in Netscape; In IE, you 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 internal width of the current window. The innerHeight property of the Window object contains the internal height of the current window.
The body attribute of the Document object corresponds to the tag of the HTML document. The documentElement property of the Document object represents the root node of the HTML document.
document.body.clientHeight indicates the current height of the window in which the HTML document is located. document.body. clientWidth represents the current width of the window in which the HTML document is located.
Browser sizing events
window.onresize=funName; Call the funName function when the browser size changes |
Previous:seo title keyword description word limit Title, keywords, descrip{filter}tion lengthNext:The type "Object" is defined in an unreferenced assembly. Must add a response to the program...
|
