Comment déterminer avec précision les dimensions des éléments HTML ?

Détermination des dimensions réelles des éléments HTML

Lorsque vous essayez d'aligner un élément HTML dans la fenêtre d'affichage du navigateur, il est essentiel d'obtenir avec précision sa largeur et hauteur réelles. Cela nécessite d'exploiter des propriétés et des fonctions spécifiques prises en charge par divers navigateurs.

.offsetWidth et .offsetHeight

Pour déterminer la largeur et la hauteur d'un élément sans prendre en compte les transformations CSS, utilisez les propriétés .offsetWidth et .offsetHeight. Ces propriétés sont directement accessibles sur l'élément, contrairement à .style.

var width = document.getElementById('foo').offsetWidth;

getBoundingClientRect()

La fonction .getBoundingClientRect() permet une lecture plus précise d'un les dimensions et l'emplacement de l'élément après l'application des transformations CSS. Il renvoie des nombres à virgule flottante indiquant les attributs suivants :

console.log(document.getElementById('foo').getBoundingClientRect())
DOMRect {
    bottom: 177,
    height: 54.7,
    left: 278.5,​
    right: 909.5,
    top: 122.3,
    width: 631,
    x: 278.5,
    y: 122.3,
}

Support du navigateur

Property/Function	Browser Support
.offsetWidth/.offsetHeight	All major browsers
getBoundingClientRect()	All major browsers except Internet Explorer 8 and below

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!