screen object
Get screen height (resolution)
screen.width //screen width
screen.height //screen height
screen.availwidth //Available screen width The value of the screen pixel height minus the system component height
screen.availheight //The available height of the screen is the value of the screen pixel width minus the system component width
window object
Get window position and size
window.screentop //The distance from the top of the window to the top of the screen
window.screenleft //the distance from the left side of the window to the left side of the screen
window.innerwidth //The width of the visible area (viewpoint) in the window
alert (window.innerwidth);//chrome 1366 ff 1366 ie 1366
window.innerheight //The height of the viewable area in the window This value is related to factors such as whether the browser displays a menu bar
alert (window.innerheight);//chrome 643 ff 657 ie 673
window.outerwidth //The width of the browser window itself (viewable area width + browser border width)
alert (window.outerwidth);//chrome 1366 ff 1382 ie 1382
//Indicate that chrome has no border width when the browser window is maximized,8px border when not maximized
//ff and ie have a border width of 8px
window.outerheight //The height of the browser window itself
alert (window.outerheight);//chrome 728 ff 744 ie 744
element object
It is necessary to explain the box model before introducing the various height and width of the element objectDefault box modelbox-sizing:content-box;
boxwidth=2 * margin + 2 * border + 2 * padding + width
boxheight=2 * margin + 2 * border + 2 * padding + height
When no scroll bar appears
body {margin:0;}
#demo {
width:100px;
height:100px;
padding:10px;
border:20px;
margin:30px;
background-color:red;
}
<div>123456789 123456789</div>
clientwidth:Returns the visible width of the content on the page (excluding borders,Margins or scroll bars)
clientheight:Returns the visible height of the content on the page (excluding borders,Margins or scroll bars)
clientwidth=2 * padding + width-scrollbarwidth
console.log (document.getelementbyid ("demo"). clientwidth);//120 at this time scrollbarwidth=0
clientheight=2 * padding + height-scrollbarheight
console.log (document.getelementbyid ("demo"). clientheight);//120 at this time scrollbarwidth=0
offsetwidth:The width of the returned element includes borders and padding,But not including margins
offsetheight:The height of the returned element includes the border and padding,But not including margins
offsetwidth=2 * border + 2 * padding + width
console.log (document.getelementbyid ("demo"). offsetwidth) //160
offsetheight=2 * border + 2 * padding + height
console.log (document.getelementbyid ("demo"). offsetheight) //160
offsetleft:Get the calculated left position of the object relative to the layout or the parent coordinates specified by the offsetleft attribute
offsettop:Get the calculated top position of the object relative to the layout or the parent coordinates specified by the offsettop attribute
console.log (document.getelementbyid ("demo"). offsetleft) //30
console.log (document.getelementbyid ("demo"). offsettop) //30
When the scroll bar appears
body {
margin:0;
padding:20px;
width:1000px;
height:500px;
}
<div>123456789123456789</div>
scrollwidth:Returns the entire width of the element (including hidden places with scroll bars)
scrollheight:Returns the height of the entire element (including hidden places with scroll bars)
scrollwidth=2 * padding + width
console.log (document.body.scrollwidth) //1040
scrollheight=2 * padding + width
console.log (document.body.scrollheight) //540
scrolltop:The height of the element's hidden content when scrolling down.When not set, it defaults to 0, and its value changes as the scroll block scrolls.
scrollleft:The width of the element ’s hidden content when you slide the scroll block to the right.When not set, it defaults to 0, and its value changes as the scroll block scrolls.
event object
The event object represents the state of the event,For example, the element in which the event occurred, the state of the keyboard keys, the position of the mouse, and the state of the mouse button.
event.pagex:The coordinates relative to the entire page,Horizontal distance from the top left corner of the page to the origin of the mouse (ie8 is not supported)
event.pagey:The coordinates relative to the entire page,The vertical distance from the top left corner of the page to the origin of the mouse (ie8 is not supported)
event.clientx:The coordinates of the relative viewable area,The horizontal distance from the top left corner of the browser visible area to the origin of the coordinates
event.clienty:The coordinates of the relative viewable area,The vertical distance from the top left corner of the browser visible area to the origin of the coordinates
event.screenx:The coordinates relative to the computer screen,The horizontal distance from the top left corner of the screen to the origin of the coordinates
event.screeny:The coordinates relative to the computer screen,The vertical distance from the top left corner of the screen to the origin of the coordinates
event.offsetx:Relative to its own coordinates,The horizontal distance from the origin of the top left corner of the padding to the position of the mouse
event.offsety:Relative to its own coordinates,The horizontal distance from the origin of the top left corner of the padding to the position of the mouse
to sum up
- php - coincheck api authentication doesn't work
- php - i would like to introduce the coincheck api so that i can make payments with bitcoin on my ec site
- [php] i want to get account information using coincheck api
- python - you may need to restart the kernel to use updated packages error
- the emulator process for avd pixel_2_api_29 was killed occurred when the android studio emulator was started, so i would like to
- python 3x - typeerror: 'method' object is not subscriptable
- javascript - how to check if an element exists in puppeteer
- xcode - pod install [!] no `podfile 'found in the project directory
- i want to call a child component method from a parent in vuejs
- vuejs - [vuetify] unable to locate target [data-app] i want to unit test to avoid warning