Maison >interface Web >tutoriel HTML >HTML implémente du code pour obtenir la taille, la largeur et la hauteur des éléments (code pur)
HTML implémente du code pour obtenir la taille, la largeur et la hauteur des éléments (code pur)
- 不言original
- 2018-08-02 10:24:333534parcourir
Cet article vous présente le code (code pur) pour obtenir la taille, la largeur et la hauteur des éléments en HTML. Il a une certaine valeur de référence. Les amis dans le besoin pourront s'y référer. vous être utile.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>获取元素尺寸宽高</title>
</head>
<style>
#div{
background-color: #00ff00;
width: 60px;
height: 60px;
padding: 20px;
margin: 20px;
border: 20px solid #00ffff;
}
</style>
<body>
<div id="div">Prosper</div>
<script>
/**
* 获取元素尺寸宽高(不包含margin)
*/
Element.prototype.getElementOffset = function () {
var objData = this.getBoundingClientRect();
if (objData.width) {
return {
w: objData.width,
h: objData.height
}
} else {
return {
w: objData.right - objData.left,
h: objData.top - objData.bottom
}
}
}
console.log(document.getElementById('div').getElementOffset());
</script>
</body>
</html>Recommandations associées :
html donné les options de balise et ajouter des balises (avec code)
HTML implémente l'obtention de la distance de défilement du navigateur (code pur)
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!
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn