Ich habe eine Bildsteuerung und ich muss einige Elemente auf der Bildsteuerung platzieren. Wenn ich getBoundingClientRect() verwendet, funktioniert es in IE (7,8 und 9), aber es gibt andere Werte in Firefox und Chrome. Gibt es noch eine andere Funktion, um das Begrenzungsrechteck eines Elements zu erhalten?Warum gibt getBoundingClientRect verschiedene Werte in IE und Firefox
Zitat aus alten IE-Dokumentation getBoundingClientRect: „In Microsoft® Internet Explorer 5, das Fenster der oberen linken auf 2,2 (Pixel) ist in Bezug auf die wahrer Kunde. " Dies scheint immer noch gültig zu sein.
In IE9 Verwendung von <meta http-equiv="x-ua-compatible" content="ie=edge"/> "setzt" die obere linke Ecke auf seine richtige Position (0,0).
Wie d4rkpr1nc3 beantwortet, können Sie diese Werte mit anderen Methoden erhalten, aber die Ergebnisse hängen auch vom verwendeten Browser ab. Ich denke, Sie brauchen einen etwas anderen Ansatz für dieses Problem. Überprüfen Sie den Code unten, es könnte Ihnen einige Ideen geben.
<DIV id="imagecontrol" style="position:absolute;width:200px;height:200px;">
<DIV id="topleft" style="position:absolute;width:100px;height:100px;left:0px;top:0px;"></DIV>
<DIV id="topright" style="position:absolute;width:100px;height:100px;right:0px;top:0px;"></DIV>
<DIV id="bottomleft" style="position:absolute;width:100px;height:100px;left:0px;bottom:0px;"></DIV>
<DIV id="bottomright" style="position:absolute;width:100px;height:100px;right:0px;bottom:0px;"></DIV>
</DIV>
könnten Sie Offsets verwenden, das zu tun, wie folgt aus:
var top = element.offsetTop;
var left = element.offsetLeft;
var width = element.offsetWidth;
var height = element.offsetHeight;
var bottom = top + height;
var right = left + width;
Nicht wirklich. Zum Beispiel berücksichtigt 'getBoundingClientRect' CSS-Transformationen. – tillda
In der Tat nein: offsetTop ist die Position relativ zu einem positionierten Elternteil, wenn es einen gibt, so dass jeder Elternteil mit position: relative/fixed/absolute den Offsetwert beeinflusst (gegen den Offsetwert von domcument.body, was wir normalerweise wollen)) – dougwig
Dies löste ein Problem für mich, wo wir 'range.getBoundingClient()' von einem versteckten iFrame verwenden wollten und Firefox & IE nur Nullen (0) für x/y/width/height zurückgaben. @ d4rkpr1nc3 thx! –
Die Werte möglicherweise etwas unterschiedlich in verschiedenen Browsern aber getBoundingClientRect() immer noch die beste Wahl für die Leistung und Genauigkeit. Die zurückgegebenen Koordinaten beziehen sich jedoch auf das Ansichtsfenster und nicht auf das Dokument. Daher müssen Sie dies mithilfe von Bildlaufwerten im Fenster/Dokument berücksichtigen.
Hier ist ein guter Blog-Eintrag dazu:
David Mark auf dieses Zeug gut ist. Hier ein Tipp seiner von comp.lang.javascript:
https://groups.google.com/forum/?fromgroups#!topic/comp.lang.javascript/zWJaFM5gMIQ
Wie bekommt man ie8 die gleichen Werte wie Chrom? – SuperUberDuper
@SuperUberDuper Die Idee meiner Antwort ist, dass Sie wahrscheinlich nicht können. Das Layout-Modell ist in verschiedenen Browsern unterschiedlich, besonders in alten wie IE8. Sie können Mathe mit dem Wert zwar tun, aber es ist besser, Ihre eigene Frage zu stellen, wie man das macht. – Teemu
ok danke !!!!!!! – SuperUberDuper