So erhalten Sie die überlaufende Breite eines Elements in einer Webseite

Lesezeit: 2 Minuten

Benutzer-Avatar
Sean O. Donnell

Ich habe so zwei Divs

<div id="parent" style="width:100px:overflow:hidden;">
    <div id="child"> 
      tooooooooooooooooooooo much content to fit in parent
    </div>
</div>

Ich aktualisiere den Inhalt von child dynamisch und scrolle ihn mit jQuery. Ich würde gerne herausfinden können, wie breit das Kind ist, damit ich weiß, wann ich mit dem Scrollen aufhören muss. Das Problem ist, dass die tatsächliche Breite des Kindes, sobald der überlaufende Inhalt vorhanden ist, sogar breiter ist als der Bildschirm (scheint beim aktuellen Testinhalt etwa 2500 Pixel zu betragen). Der Rand des Elements reicht, falls gesetzt, nicht bis zur tatsächlichen Breite des Inhalts, der Text läuft über den sichtbaren Rand hinaus.

Verwendung von jQuerys $('#child').width das clientWidth, scrollWidth (Dank Bobince) und offsetWidth Eigenschaften alle maximal bei 1024px (das ist die Breite meines Monitors). Kennt jemand eine Möglichkeit herauszufinden, wie breit der Elementinhalt einschließlich des Überlaufs ist? Wenn es hilft, wird die App, die ich baue, in einer Kioskumgebung ausgeführt, sodass eine Lösung nur für Firefox (sogar eine nächtliche Version) in Ordnung ist.

Aktualisieren: scrollWidth auf die übergeordneten werke hätte ich genauer lesen sollen, nochmals vielen dank bobince.

document.getElementById('parent').scrollWidth

Bildlaufweite ist eine IE-Erweiterung, die in der Vergangenheit weniger gut unterstützt wurde als offsetWidth. Heutzutage enthalten jedoch alle modernen Desktop-Browser es.

  • Ich fürchte, scrollWith erreicht auch maximal 1024 Pixel. Danke aber für den Vorschlag.

    – Sean O. Donnell

    19. April 2009 um 3:19 Uhr

  • Funktioniert für mich in FF3 – posten Sie ein vollständiges Codebeispiel, das nicht funktioniert? Überprüfen Sie, ob Sie die scrollWidth des „Elternteils“ betrachten, nicht das „Kind“, und dass der zu breite Inhalt nicht auf natürliche Weise bei 1024 umgebrochen wird (oder verwenden Sie „white-space: no-wrap“, um dies zu stoppen). Überprüfen Sie abschließend die Syntax – in Ihrem Beispiel steht zwischen den Regeln ein Doppelpunkt anstelle eines Semikolons.

    – Bobin

    19. April 2009 um 15:15 Uhr

  • aha, die Eltern, das bisschen verpasst, es funktioniert! Vielen Dank.

    – Sean O. Donnell

    20. April 2009 um 0:30 Uhr

  • Herr, Sie sind eine Legende!

    – Mehdi Souregi

    28. November 2018 um 10:22 Uhr

Mit JQuery können Sie Folgendes tun:

$('#parent')[0].scrollWidth

  • Das Herausziehen des nullten Elements aus dem jQuery-Elementarray gibt den DOM-Knoten zurück, der mit der obigen Antwort identisch ist (document.getElementById('parent').scrollWidth). Der Vorteil ist das scrollWidth kann sauber ohne jQuery durchgeführt werden.

    – Hans

    3. Oktober 2016 um 23:13 Uhr

1158980cookie-checkSo erhalten Sie die überlaufende Breite eines Elements in einer Webseite

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy