Heim > Web-Frontend > js-Tutorial > So ermitteln Sie die Höhe versteckter Elemente in Javascript

So ermitteln Sie die Höhe versteckter Elemente in Javascript

青灯夜游
Freigeben: 2023-01-11 09:20:36
Original
3780 Leute haben es durchsucht

Erfassungsmethode: 1. Führen Sie die JQuery-Datei ein. 2. Verwenden Sie die Anweisung „$(„#id value“)“, um das ausgeblendete Elementobjekt gemäß dem angegebenen ID-Wert abzurufen. )“-Anweisung, um die Höhe des ausgeblendeten Elements zu ermitteln.

So ermitteln Sie die Höhe versteckter Elemente in Javascript

Die Betriebsumgebung dieses Tutorials: Windows7-System, Javascript1.8.5 &&jquery3.1.0-Version, Dell G3-Computer.

Stellen Sie unter normalen Umständen zunächst sicher, dass das Div eine Höhe hat.

nbsp;html>


    <meta>
    <title>Document</title>
    <script></script>


    <div>
        <div>
            子div内容,需要获取我的高度
        </div>
    </div>

<script>
    console.log($("#div").height())  //21
    console.log($("#divsub").height()) //21
</script>
Nach dem Login kopieren

So ermitteln Sie die Höhe versteckter Elemente in Javascript

Wenn wir style="display:none;" zum Element mit der ID div hinzufügen, führen Sie den Code erneut aus und das Ergebnis ist wie folgt: style="display:none;" 之后,重新运行代码,结果如下:

So ermitteln Sie die Höhe versteckter Elemente in Javascript

可以看到,父div能正常获取值,而子div已经获取不到高度了。

当我们把 style="display:none;" 改成 style="visibility: hidden;"

So ermitteln Sie die Höhe versteckter Elemente in Javascript

Sie können das übergeordnete Element sehen div kann den Wert normal erhalten, und das untergeordnete div kann die Höhe nicht mehr erhalten.

Wenn wir style="display:none;" in style="visibility: versteckt;" ändern, können wir es weiterhin normal abrufen. Aber die Position der Div ist immer noch da. So ermitteln Sie die Höhe versteckter Elemente in Javascript

Es gibt also die folgende Lösung: Verwenden Sie die Sichtbarkeit, um es auszublenden, und verschieben Sie dann das Div an eine unsichtbare Stelle außerhalb des Bildschirms. 🎜
nbsp;html>


    <meta>
    <title>Document</title>
    <script></script>


    <div>
        <div>
            子div内容,需要获取我的高度
        </div>
    </div>

<script>
    console.log($("#div").height())  
    console.log($("#divsub").height())
</script>
Nach dem Login kopieren
🎜【Empfohlenes Lernen: 🎜Javascript-Tutorial für Fortgeschrittene🎜】🎜

Das obige ist der detaillierte Inhalt vonSo ermitteln Sie die Höhe versteckter Elemente in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage