HTML implements code to obtain element size, width and height (pure code)-HTML Tutorial-php.cn

HTML implements code to obtain element size, width and height (pure code)

不言

Release： 2018-08-02 10:24:33

Original

3506 people have browsed it

This article introduces to you the code (pure code) for obtaining the element size width and height in HTML. It has certain reference value. Friends in need can refer to it. I hope it will be useful to you. Helps.

<!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>

Copy after login

Related recommendations:

htmlGiven tag options and add tags (with code)

HTML Implementation of obtaining the width and height of the browser's visible area (pure code)

html Implementation of obtaining the browser scrolling distance (pure code)

The above is the detailed content of HTML implements code to obtain element size, width and height (pure code). For more information, please follow other related articles on the PHP Chinese website!