Tengo un control de imagen y necesito colocar algunos elementos sobre el control de imagen. cuando utilicé getBoundingClientRect() está trabajando en IE (7,8 y 9) pero está dando diferentes valores en Firefox y Chrome. ¿Hay alguna otra función disponible para obtener el rectángulo delimitador de un elemento?por qué getBoundingClientRect da valores diferentes en IE y Firefox
Cita de la documentación de edad IE para getBoundingClientRect: "En Microsoft® Internet Explorer 5, superior izquierda de la ventana está a 2,2 (píxeles) con respecto a la verdadero cliente ". Esto todavía parece ser válido.
En IE9 el uso de <meta http-equiv="x-ua-compatible" content="ie=edge"/> "establece" la esquina superior izquierda en su posición correcta (0,0).
Como respondió d4rkpr1nc3, puede obtener esos valores por otros métodos, pero los resultados también dependen del navegador utilizado. Creo que necesitarás un enfoque ligeramente diferente a este problema. Verifique el código a continuación, podría darle algunas ideas.
<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>
Usted podría utilizar compensaciones de hacer eso, así:
var top = element.offsetTop;
var left = element.offsetLeft;
var width = element.offsetWidth;
var height = element.offsetHeight;
var bottom = top + height;
var right = left + width;
Realmente no. Por ejemplo, 'getBoundingClientRect' tiene en cuenta las transformaciones de CSS. – tillda
De hecho no: offsetTop es la posición relativa a un elemento primario posicionado si hay uno, por lo que cualquier elemento primario con posición: relativo/fijo/absoluto afectará el valor de desplazamiento (frente al valor de desplazamiento del cuerpo de domo, que es lo que generalmente queremos) – dougwig
Esto resolvió un problema para mí cuando intentábamos usar 'range.getBoundingClient()' de un iFrame oculto y Firefox & IE estaban devolviendo todos los ceros (0) para x/y/width/height. @ d4rkpr1nc3 thx! –
Los valores tal vez ligeramente diferentes en distintos navegadores, pero getBoundingClientRect() sigue siendo la mejor opción para el rendimiento y la precisión. Sin embargo, las coordenadas que devuelve son relativas a la ventana gráfica en lugar de al documento, por lo que deberá contabilizar eso utilizando valores de desplazamiento en la ventana/documento.
He aquí una buena entrada en el blog acerca de esto:
David Mark es bueno en estas cosas. He aquí un consejo suyo de comp.lang.javascript:
https://groups.google.com/forum/?fromgroups#!topic/comp.lang.javascript/zWJaFM5gMIQ
¿cómo se obtiene ie8 para dar los mismos valores que cromo? – SuperUberDuper
@SuperUberDuper La idea de mi respuesta es que probablemente no puedas. El modelo de diseño es diferente en diferentes navegadores, especialmente en los antiguos, como IE8. Sin embargo, puede hacer cálculos matemáticos con el valor, pero es mejor hacer su propia pregunta sobre cómo hacerlo. – Teemu
ok gracias !!!!!!! – SuperUberDuper