javascript - attribute - title html

Recuperar ancho/alto de un elemento escalado css3

Question

Estoy luchando contra una rareza (creo) de la propiedad offsetWidth.
Este es el escenario:

Tengo, digamos, una etiqueta span , en mi js, en cierto punto realizo una transformación css3 a este elemento, como:

 el.set(''styles'', {
''transform'':''scale(''+scale+'', ''+scale+'')'', /* As things would be in a normal world */
''-ms-transform'':''scale(''+scale+'', ''+scale+'')'', /* IE 9 */
''-moz-transform'':''scale(''+scale+'', ''+scale+'')'', /* Moz */
''-webkit-transform'':''scale(''+scale+'', ''+scale+'')'', /* Safari / Chrome */
''-o-transform'':''scale(''+scale+'')'' /* Oprah Winfrey */
});
w = el.getWidth();
console.log(''after scaling: '' + w);

en este punto, el registro me devuelve valores borrosos, como si no supiera qué decir.
¿cualquier sugerencia?

Answer 1

Las transformaciones no afectan las propiedades intrínsecas de CSS, por lo que está viendo el comportamiento correcto. Debe consultar la Matriz de transformación actual, tal como se devuelve de getComputedStyle (). WebkitTransform para averiguar qué tan grande se ha escalado algo.

Actualización: en Firefox 12 y versiones posteriores y Chrome / Safari, como dice Alex a continuación, puede usar getBoundingClientRect () para tener en cuenta las transformaciones aplicadas a un elemento

La transición de escala comienza desde 50% / 50% porque ese es el comportamiento predeterminado y correcto. Si desea que se inicie desde el origen, debe establecer el origen de transformación: 0% 0%;

Answer 2

Supongo que la etiqueta span tiene display:block ? Se supone que las transformaciones solo funcionan para elementos de bloque. Cuando voy a la consola y carga jquery (solo por facilidad) y hago esto:

$(''span#foo'').css({"-webkit-transform": "scale(2.0, 2.0)"})

no pasa nada. Pero si hago esto:

$(''span#foo'').css(''display'',''block'').css({"-webkit-transform": "scale(2.0, 2.0)"})

De repente cambia, y la altura del desplazamiento aumenta. De manera decepcionante, la altura del desplazamiento va de 16 a 19, y no a 32 (aunque la apariencia visual es el doble del tamaño y quizás es precisa), pero al menos parece que funciona como se anuncia.

Answer 3

getBoundingClientRect () no me funcionó (en Chrome 49).

Esta respuesta me llevó a otra solución a mi problema: https://.com/a/7894886/1699320

function getStyleProp(elem, prop){
if(window.getComputedStyle)
return window.getComputedStyle(elem, null).getPropertyValue(prop);
else if(elem.currentStyle) return elem.currentStyle[prop]; //IE
}
getStyleProp(element, ''zoom'') //gives zoom factor to use in calculations

Answer 4

getBoundingClientRect() devuelve los valores correctos para mí.

jsFiddle .