méthode js pour obtenir la largeur et la hauteur réelles des éléments HTML

L'éditeur suivant vous apportera une méthode js pour obtenir la largeur et la hauteur réelles des éléments HTML. L’éditeur le trouve plutôt bien, alors j’aimerais le partager avec vous maintenant et le donner comme référence pour tout le monde. Suivons l'éditeur pour y jeter un œil

Le premier cas est que la largeur et la hauteur sont toutes deux écrites dans la feuille de style, comme #p1{width:120px;}. Dans ce cas, la largeur ne peut pas être obtenue via #p1.style.width, mais la largeur peut être obtenue via #p1.offsetWidth.

Le deuxième cas est que la largeur et la hauteur sont écrites en ligne, comme style="width:120px;". Dans ce cas, la largeur peut être obtenue par les deux méthodes ci-dessus.

Résumé, car id.offsetWidth et id.offsetHeight, que le style soit écrit dans la feuille de style ou en ligne, il est préférable d'utiliser ces deux attributs lorsque nous obtenons la largeur et la hauteur de l'élément. Notez que si les attributs ne sont pas écrits dans le style en ligne, ils ne peuvent pas être obtenus via id.style.atrr.

De nos jours, la production front-end écrit rarement les styles directement dans le style. Ils sont tous écrits dans la feuille de style. Si le style que vous souhaitez obtenir n'a pas de style correspondant (tout comme #p1.style.width correspond à #p1.offsetWidth), vous ne pouvez obtenir les attributs de la feuille de style que séparément sans utiliser le navigateur. Vous pouvez essayer de rechercher. pour les propriétés "JS Get Style" et autres.

Code :

var o = document.getElementById("view");
var h = o.offsetHeight; //高度
var w = o.offsetWidth; //宽度

Recommandations associées :

js+html5 pour obtenir un effet de compte à rebours actualisable de la page

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!