HTML implémente du code pour obtenir la taille, la largeur et la hauteur des éléments (code pur)-tutoriel HTML-php.cn

HTML implémente du code pour obtenir la taille, la largeur et la hauteur des éléments (code pur)

不言

Libérer： 2018-08-02 10:24:33

original

3503 Les gens l'ont consulté

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(&#39;div&#39;).getElementOffset());
    </script>
</body>

</html>

Copier après la connexion

Recommandations associées :

html donné les options de balise et ajouter des balises (avec code)

HTML implémente l'obtention de la largeur et de la hauteur de la zone visible du navigateur (code pur)

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!