正文

学会用jQuery轻松获取动态生成div的高度

/0 浏览量
0402

在HTML和CSS的世界里，动态生成元素是家常便饭。jQuery作为JavaScript的一个库，极大地简化了DOM操作。本文将教你如何使用jQuery轻松获取一个动态生成的div元素的高度。

前言

在开始之前，我们需要确保已经将jQuery库包含在我们的HTML页面中。以下是jQuery库的引用代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

获取静态div的高度

首先，让我们从一个静态的div元素开始。假设我们有一个如下所示的div：

<div id="myDiv" style="height: 100px; width: 200px; background-color: #f2f2f2;">
    这是一个静态的div。
</div>

要获取这个div的高度，你可以使用jQuery的.height()方法：

$(document).ready(function() {
    var height = $('#myDiv').height();
    console.log(height); // 输出：100
});

这段代码在文档加载完毕后执行，它会获取id为myDiv的元素的高度，并将结果输出到控制台。

获取动态生成div的高度

现在，让我们看看如何获取一个动态生成的div的高度。假设你有一个按钮，当点击这个按钮时，会动态生成一个div：

<button id="createDivBtn">创建div</button>

$(document).ready(function() {
    $('#createDivBtn').click(function() {
        var newDiv = $('<div>', {
            id: 'dynamicDiv',
            css: {
                height: '150px',
                width: '300px',
                backgroundColor: '#f2f2f2'
            }
        });
        $('body').append(newDiv);
    });
});

当你点击按钮时，这段代码会创建一个新的div，并将其添加到body元素中。为了获取这个动态生成的div的高度，我们可以使用相同的方法：

$(document).ready(function() {
    $('#createDivBtn').click(function() {
        var newDiv = $('<div>', {
            id: 'dynamicDiv',
            css: {
                height: '150px',
                width: '300px',
                backgroundColor: '#f2f2f2'
            }
        });
        $('body').append(newDiv);

        // 获取div的高度
        var height = $('#dynamicDiv').height();
        console.log(height); // 输出：150
    });
});

注意，这里我们使用.height()方法获取的是div在添加到DOM后的高度。如果你在创建div后立即获取高度，它将是0，因为div还没有渲染到页面上。

总结

使用jQuery获取动态生成div的高度非常简单。只需要确保在获取高度之前，元素已经被添加到DOM中，并且已经渲染完成。通过.height()方法，你可以轻松地获取任何div的高度，无论是静态的还是动态生成的。希望这篇文章能帮助你更好地理解如何使用jQuery进行DOM操作。

-- 展开阅读全文 --