javascript如何獲取隱藏元素的高度

發(fā)布時間：2021-09-16 16:37:42 來源：億速云閱讀：261 作者：小新欄目：web開發(fā)

這篇文章將為大家詳細(xì)講解有關(guān)javascript如何獲取隱藏元素的高度，小編覺得挺實(shí)用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

獲取方法：1、引入jquery文件；2、使用“$("#id值")”語句根據(jù)指定id值獲取隱藏元素對象；3、使用“元素對象.height()”語句來獲取隱藏元素的高度。

本教程操作環(huán)境：windows7系統(tǒng)、javascript1.8.5&&jquery3.1.0版、Dell G3電腦。

首先，正常情況下，確保div是有高度的。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="jquery-3.1.0.min.js" type="text/javascript"></script>
</head>
<body>
    <div id="div">
        <div id="divsub">
            子div內(nèi)容，需要獲取我的高度
        </div>
    </div>
</body>
<script type="text/javascript">
    console.log($("#div").height())  //21
    console.log($("#divsub").height()) //21
</script>
</html>

javascript如何獲取隱藏元素的高度

當(dāng)我們在id為div的元素上加了 style="display:none;" 之后，重新運(yùn)行代碼，結(jié)果如下：

javascript如何獲取隱藏元素的高度

可以看到，父div能正常獲取值，而子div已經(jīng)獲取不到高度了。

當(dāng)我們把 style="display:none;" 改成 style="visibility: hidden;" 后，仍能夠正常獲取。但是div的位置還在。

javascript如何獲取隱藏元素的高度

于是，就有了下面的解決方案，使用visibility隱藏，然后把div移到屏幕之外看不見的地方就可以了。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="jquery-3.1.0.min.js" type="text/javascript"></script>
</head>
<body>
    <div id="div" style="visibility:hidden; position: absolute;top:-9999px;left:-9999px;">
        <div id="divsub">
            子div內(nèi)容，需要獲取我的高度
        </div>
    </div>
</body>
<script type="text/javascript">
    console.log($("#div").height())  
    console.log($("#divsub").height())
</script>
</html>

關(guān)于“javascript如何獲取隱藏元素的高度”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

向AI問一下細(xì)節(jié)

javascript如何獲取隱藏元素的高度

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽