Obtenez la position et la taille des éléments en utilisant JS natif

1. Hauteur intérieure, largeur intérieure : marge intérieure + zone de contenu

clientWidth
clientHeight

2. Hauteur extérieure, largeur extérieure : bordure + marge intérieure + zone de contenu

offsetWidth
offsetHeight

3 . Bordure supérieure, bordure gauche

clientTop
clientLeft

4. La taille de l'élément et sa position par rapport à la fenêtre

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

5. 🎜>

6. La taille de la zone visible

offsetTop
offsetLest

7. La taille réelle de la page

document.documentElement.clientWidth
document.documentElement.clientHeight

8. Distance du coin supérieur gauche de l'écran

document.documentElement.scrollWidth
document.documentElement.scrollHeight

9. Largeur et hauteur de l'écran

window.screenX、
window.screenY

10. Largeur et hauteur de l'écran disponibles (hors barre des tâches)

window.screen.width
window.screen.height

11. Contenu de la fenêtre Hauteur, largeur intérieure (zone d'affichage du document + barre de défilement)

window.screen.availWidth
window.screen.availHeight

12. Hauteur extérieure et largeur extérieure de la fenêtre

window.innerWidth
window.innerHeight

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!