Ermitteln Sie die Position und Größe von Elementen mit nativem JS

1. Innere Höhe, innere Breite: innerer Rand + Inhaltsfeld

clientWidth
clientHeight

2. Äußere Höhe, äußere Breite: Rand + innerer Rand + Inhaltsfeld

offsetWidth
offsetHeight

3 . Oberer Rand, linker Rand

clientTop
clientLeft

Die Größe des Elements und seine Position relativ zum Ansichtsfenster

getBoundingClientRect()
//x\y:元素的左上角和父元素左上角的距离
//width/height:边框 + 内边距 + 内容框
//top:元素的上边界和父元素上边界的距离
//left:元素的左边界和父元素左边界的距离
//right:元素的右边界和父元素的左边界的距离
//bottom:元素的下边界和父元素上边界的距离

5. Oberer Versatz, linker Versatz Betrag

offsetTop
offsetLest

6. Die Größe des sichtbaren Bereichs

document.documentElement.clientWidth
document.documentElement.clientHeight

Die tatsächliche Größe der Seite

document.documentElement.scrollWidth
document.documentElement.scrollHeight

8 obere linke Ecke des Bildschirms

window.screenX、
window.screenY

9. Bildschirmbreite und -höhe

window.screen.width
window.screen.height

10. Verfügbare Bildschirmbreite und -höhe (ohne Taskleiste)

window.screen.availWidth
window.screen.availHeight

11. Fensterinhalt Höhe, innere Breite (Dokumentanzeigebereich + Bildlaufleiste)

window.innerWidth
window.innerHeight

12. Äußere Höhe und äußere Breite des Fensters

window.outerWidth
window.outerHeiht

Das obige ist der detaillierte Inhalt vonErmitteln Sie die Position und Größe von Elementen mit nativem JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!