Ermitteln der oberen linken Koordinaten eines Hintergrundbildes, das mit CSS verschoben wird
Ich versuche, die oberen und linken Koordinaten eines Hintergrundbildes zu finden , die durch Anwendung einiger CSS-Regeln aus dem Ansichtsfenster verschoben wurden. Schwierig in Worten zu erklären, hier ist ein visuelles Beispiel:
Blackbox : Ansichtsport
Redbox : <div> mit background-image
Blue box : <div> enthält ein <a>
Wenn ich getBoundingClientRect von <div> mit background-image mache, bekomme ich 0px 0px . Dies ist sinnvoll, da sich der Container im Ansichtsfenster befindet und ganz oben und links beginnt.
Allerdings wurde das Hintergrundbild dieses <div> nach links verschoben (und es hätte auch nach oben verschoben werden können), und daher sollten die Koordinaten von denen von denen abweichen der Code%. Also meine Frage ist:
Wie würde ich READ (Ich möchte nicht ändern) Wie kann ich die Koordinaten des grünen Punkts auf jeder Seite finden, die dieser Situation gegenübersteht? Ich meine, der Browser muss gewusst haben, wie viele Pixel er braucht, um <div> zu schneiden, oder?
Ich verwende derzeit Javascript, um auf die Web / Dom-API zuzugreifen. Ich bin bereit, irgendetwas zu benutzen (undokumentiert vielleicht?), Um dies zu erreichen.
2 Antworten
Hier ist eine Lösung für Ihr Problem, die auf modernen Browsern funktioniert.
%Vor%Wie Sie auf der folgenden Seite sehen können, unterstützen nicht alle Webbrowser diese Methode.
Es gibt keine Antwort auf den " Cross-Browser (IE8-) getComputedStyle mit Javascript Frage noch und ich kenne keine andere Lösung für dieses Problem.
Ohne getComputedStyle () gibt es keine vernünftige Möglichkeit, die aktuellen Stileinstellungen für ein Element zu erhalten, da hierfür alle enthaltenen CSS durchlaufen werden müssen. Es ist möglich, erfordert aber CPU-intensiven Code. Wenn Sie in diese Richtung gehen, können Sie ein temporäres div innerhalb des vorhandenen div mit relativer Positionierung erstellen, möglicherweise setzen Sie oben und links oder Ränder auf die Werte von der Hintergrundposition und berechnen dann, wo div clientTop und clientLeft enden up, die in einigen Fällen funktionieren kann.
Dafür gibt es eine css-Eigenschaft: die background-position . Probieren Sie den folgenden Code aus, um die angeforderten Informationen abzurufen:
%Vor%Tags und Links javascript html css dom