明輝手游網(wǎng)中心：是一個免費(fèi)提供流行視頻軟件教程、在線學(xué)習(xí)分享的學(xué)習(xí)平臺！

html完成取得元素尺寸寬高的代碼（純代碼）

發(fā)表時間：2023-09-06 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：

[摘要]這篇文章給大家介紹的內(nèi)容是關(guān)于html實(shí)現(xiàn)獲取元素尺寸寬高的代碼（純代碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。<!DOCTYPE html> <html><head><meta charset="UTF-8"...
這篇文章給大家介紹的內(nèi)容是關(guān)于html實(shí)現(xiàn)獲取元素尺寸寬高的代碼（純代碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

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

相關(guān)推薦：

html給定標(biāo)簽選項(xiàng)并添加標(biāo)簽（附代碼）

HTML實(shí)現(xiàn)獲取瀏覽器可視區(qū)域?qū)捀撸兇a）

html實(shí)現(xiàn)獲取瀏覽器滾動距離（純代碼）

以上就是html實(shí)現(xiàn)獲取元素尺寸寬高的代碼（純代碼）的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！


網(wǎng)站建設(shè)是一個廣義的術(shù)語，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。