Ich habe ein Element und brauche seine Breite ohne (!) Vertikale Bildlaufleiste.
Firebug sagt mir, dass die Körperbreite 1280px beträgt.
Beides funktioniert in Firefox einwandfrei:
console.log($('.element').outerWidth() );
console.log($('.element').outerWidth(true) );
$detour = $('.child-of-element').offsetParent();
console.log( $detour.innerWidth() );
Sie alle geben 1263px zurück , was der Wert ist, den ich suche.
Jedoch geben mir alle anderen Browser 1280px .
Gibt es eine browserübergreifende Möglichkeit, eine Vollbildbreite ohne (!) Vertikale Bildlaufleiste zu erhalten?
jquery
cross-browser
width
häufig
quelle
quelle
width: 100%;
Antworten:
.prop("clientWidth")
und.prop("scrollWidth")
in JavaScript :
PS: Beachten Sie, dass
scrollWidth
Ihr Element zur horizontalen Verwendung nicht horizontal überlaufen solltejsBin Demo
Sie können auch verwenden
.innerWidth()
, dies funktioniert jedoch nur für dasbody
Elementquelle
body
Überläufe oder nicht. wenn es überläuft, als es einzuschränken.Sie können Vanille-Javascript verwenden, indem Sie einfach schreiben:
Sie können dies auch verwenden, um die Breite des Dokuments wie folgt zu ermitteln:
Quelle: MDN
Sie können auch die Breite des gesamten Fensters einschließlich der Bildlaufleiste wie folgt abrufen:
Dies wird jedoch nicht von allen Browsern unterstützt. Als Fallback möchten Sie möglicherweise
docWidth
wie oben beschrieben verwenden und die Breite der Bildlaufleiste erhöhen .Quelle: MDN
quelle
document.documentElement.clientWidth
hat mir am meisten geholfen, da es auch für die Höhe funktioniert (innerHeight
kann kleiner sein, wenn der Körper die Seite nicht ausfüllt usw.) und den Wert ohne Bildlaufleiste erhält.Hier einige Beispiele, bei denen davon ausgegangen
$element
wird, dass es sich um einjQuery
Element handelt:quelle
Versuche dies :
Mit diesem Code können Sie die Bildschirmbreite mit und ohne Bildlaufleiste ermitteln. Hier habe ich den Überlaufwert von geändert
body
und die Breite mit und ohne Bildlaufleiste erhalten.quelle
Der sicherste Ort, um die richtige Breite und Höhe ohne die Bildlaufleisten zu erhalten, ist das HTML-Element. Versuche dies:
Die Browserunterstützung ist ziemlich anständig, IE 9 und höher unterstützen dies. Verwenden Sie für OLD IE einen der vielen hier genannten Fallbacks.
quelle
Ich habe ein ähnliches Problem erlebt und
width:100%;
es für mich gelöst. Ich kam zu dieser Lösung, nachdem ich eine Antwort in dieser Frage versucht hatte und festgestellt hatte, dass<iframe>
diese Javascript-Messwerkzeuge aufgrund ihrer Natur ungenau sind, ohne eine komplexe Funktion zu verwenden. 100% zu tun ist eine einfache Möglichkeit, sich in einem Iframe darum zu kümmern. Ich weiß nichts über Ihr Problem, da ich nicht sicher bin, welche HTML-Elemente Sie bearbeiten.quelle
Keine dieser Lösungen funktionierte für mich, aber ich konnte sie beheben, indem ich die Breite nahm und die Breite der Bildlaufleiste subtrahierte . Ich bin mir nicht sicher, wie browserübergreifend dies ist.
quelle
Hier ist was ich benutze
quelle