简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Rumah > hujung hadapan web > html tutorial > teks badan

html实现获取元素尺寸宽高的代码（纯代码）

不言
Lepaskan： 2018-08-02 10:24:33
asal
3452 orang telah melayarinya

这篇文章给大家介绍的内容是关于html实现获取元素尺寸宽高的代码（纯代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

<!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>
Salin selepas log masuk

相关推荐：

html给定标签选项并添加标签（附代码）

HTML实现获取浏览器可视区域宽高（纯代码）

html实现获取浏览器滚动距离（纯代码）

Atas ialah kandungan terperinci html实现获取元素尺寸宽高的代码（纯代码）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：
获取元素尺寸宽高
sumber：php.cn
Artikel sebelumnya：关于Vue中计算属性的用法（附代码） Artikel seterusnya：Bootstrap表单布局有哪几种方式？Bootstrap表单布局的创建方法（附代码）
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Tajuk yang ditulis semula: Pusatkan elemen segi empat sama atau bulatan HTML tetap secara mendatar dan menegak apabila diubah saiz Bagaimana untuk memusatkan elemen html tetap segi empat sama atau bulatan dengan saiz yang...
daripada 2024-04-04 12:31:51
0
1
322
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！