Values of these properties are technically numbers w/o "px" Geometry properties are zero/null for elements that are not displayed .offsetParent returns nearest positioned ancestor or td , th , table , body returns null for not displayed elements, <body> , <html> , elements with position:fixed Positioned element is an element with position equals to absolute , relative , fixed or sticky
document.querySelector('#add-shortcut').offsetParent // div#add-box
.offsetTop & .offsetLeft x/y coordinates relative to offsetParent upper-left corner
document.querySelector('#add-shortcut').offsetTop // 53
document.querySelector('#add-shortcut').offsetLeft // 72
.offsetHeight & .offsetWidth outer width/height of an element including borders full size including borders
document.querySelector('#btns-box').offsetWidth // 647
document.querySelector('#btns-box').offsetHeight // 52
.clientTop & .clientLeft borders width/height relative coordinates of the inner side from the outer side the distances from the upper-left outer corner to the upper-left inner (content + padding) corner For left-to-right OS they are always the widths of left/top borders For right-to-left OS the vertical scrollbar is on the left so clientLeft includes its width too
document.querySelector('header').clientTop // 1 // css style: border-top: 1px solid #e0e0e0
.clientHeight & .clientWidth size of the area inside the element borders the width/height of the content including paddings w/o scrollbar scrolled content below is not included if no paddings, then clientWidth/Height is the content area, inside the borders and the scrollbar (if any)
document.querySelector('#btns-box').clientWidth // 105
document.querySelector('#btns-box').clientHeight // 42
document.documentElement.clientWidth // 670 // whole page width 680 // 10px is scrollbar
document.documentElement.clientHeight // 937 // scrolled content below is not included
.scrollHeight & .scrollWidth full inner height of the content area including the scrolled out parts like clientWidth/clientHeight, but also include scrolled-out, invisible part of the element
document.querySelector('html').clientHeight // 937
document.querySelector('html').scrollHeight // 3502
Expand element's width to its full width/height.
el.style.height = `${element.scrollHeight}px`
.scrollTop & .scrollLeft width/height of the hidden, scrolled out part of the element in other words, scrollTop is “how much is scrolled up”
document.querySelector('html').scrollTop // 0
document.querySelector('html').scrollTop // 1166 // after small scroll
Can be modified & browser will scroll the element
document.querySelector('html').scrollTop = 10
const html = document.querySelector('html')
html.scrollTop = 10
html.scrollTop = 0
html.scrollTop = 1e9
html.scrollTop += 10
isHidden() Can check if an element is hidden returns true for elements that are on-screen, but have zero sizes, like an empty div
function isHidden(elem) {
return !elem.offsetWidth && !elem.offsetHeight
}
scrollbar width
const scrollBarWidth = (el) => el.offsetWidth - el.clientWidth
put element in the middle Code won’t work reliably while ball has no width/height.
const toMiddle = (el, container) => {
el.style.left = Math.round(container.clientWidth / 2 - el.offsetWidth / 2) + 'px';
el.style.top = Math.round(container.clientHeight / 2 - el.offsetHeight / 2) + 'px';
}
window width/height Without scrollbar
document.documentElement.clientHeight
document.documentElement.clientWidth
With scrollbar More useful...
window.innerHeight
window.innerWidth
DOCTYPE Odd things are possible w/o <!DOCTYPE HTML> document width/height Due to some inconsistency from the past the most reliable way to get full height and width...
const scrollHeight = Math.max(
document.body.scrollHeight, document.documentElement.scrollHeight,
document.body.offsetHeight, document.documentElement.offsetHeight,
document.body.clientHeight, document.documentElement.clientHeight
)
.pageYOffset & .pageXOffset Scroll position.
window.pageYOffset
window.pageXOffset
.scrollY & .scrollX Same scroll position.
window.scrollY
window.scrollX
.scrollLeft & .scrollTop Same, but can be buggy.
document.documentElement.scrollLeft
document.documentElement.scrollTop
scrollTo() Scrolls the page to absolute coordinates...
window.scrollTo(pageX, pageY)
scrollTo(0, 0) // scroll to the top
scrollBy() Scrolls the page relative to its current position...
window.scrollBy(x, y)
scrollBy(0,10) // scroll a bit down
scrollIntoView() Scrolls the page to make el visible on the top of the window...
el.scrollIntoView(true) // scrolls the page to make el visible on the top // true is default, not mandatory
el.scrollIntoView(false) // scrolls the page to make el appear at the bottom
document.querySelector('table').scrollIntoView() // table on the top
document.querySelector('table').scrollIntoView(false) // scroll the whole table
Forbid the scrolling page will “freeze” at its current scroll position drawback of the method is that the scrollbar disappear and page jumps can be tackled, by comparing clientWidth before and after the freeze and adding padding to document.body
document.body.style.overflow = "hidden"
document.body.style.overflow = ""
getComputedStyle() width/height depends on box-sizing property that defines “what is” CSS width and height CSS width/height may be auto, for instance for an inline element scrollbar may have an impact do not use getComputedStyle(el) el.getBoundingClientRect() Window relative coordinates for a minimal rectangle that encloses an element has properties bottom height , left , right , top , width , x , y .bottom from top window side to bottom el's edge .bottom from left window side to right el edge same coordinates as in clientX/Y don’t have to round coordinates when setting to style.left & style.top
const rect = document.querySelector('button').getBoundingClientRect()
rect.bottom // 411.296875 // from top window side to bottom el edge // not as "bottom" CSS with position "fixed"
rect.height // 40
rect.left // 265.5
rect.right // 370.5 // from left window side to right el edge // not as "right" CSS with position "fixed"
rect.top // 371.296875
rect.width // 105
rect.x // 265.5 // no support by IE
rect.y // 371.296875 // no support by IE