Recupera larghezza/altezza di un elemento ridimensionato css3

Sto combattendo contro una stranezza (credo) della proprietà offsetWidth.
questo è lo scenario:Recupera larghezza/altezza di un elemento ridimensionato css3

ho, diciamo, un tag arco, nei miei js, ad un certo punto mi esibisco un CSS3 trasformazione a questo elemento, come:

 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);

a questo punto il log mi restituisce dei valori fuzzy, come se non sapesse cosa dire.
qualche suggerimento?

fonte

2011-04-29 holographix

valori Fuzzy? Puoi spiegarlo un po 'di più, per favore. –

@Blowski, sicuro m8, purché inserisca il codice precedente in un ciclo che itera 100 volte, ogni volta che il codice preme console.log ottengo lo stesso valore (ovvero l'impostazione 'lorem ipsum sit dolor' ridimensionata di 10 , restituisce sempre il suo valore iniziale: 272px, quindi, in base al log, la scala non influisce affatto sulle dimensioni, anche se la frase sullo schermo diventa * enorme *) – holographix

@holographix Puoi pubblicare 'getWidth() 'funzione che stai usando pure. E che browser stai registrando? –

getBoundingClientRect() restituisce i valori corretti per me.

jsFiddle.

fonte

2012-06-14 00:00:19 alex

Questo è incredibile !!! questa è la risposta giusta definita. tu sei il re. – vsync

Questo funziona per me in Chrome, ma da [la specifica] (http://www.w3.org/TR/css3-transforms/#transform-rendering) non sembra che dovrebbe: "Nota: le trasformazioni fanno influisce sul layout visivo sulla tela, ma non ha alcun effetto sul layout CSS stesso, questo significa anche che le trasformazioni non influenzano i risultati delle estensioni dell'interfaccia dell'elemento getClientRects() e getBoundingClientRect(), che sono specificate in [CSSOM-VIEW]. " –

@JakeCobb Questo è abbastanza strano, sembra che nessun venditore abbia ascoltato quella specifica :) – alex

Le trasformazioni non influenzano le proprietà intrinseche del CSS, quindi si sta osservando un comportamento corretto. È necessario esaminare la matrice di trasformazione corrente, come restituita da getComputedStyle(). WebkitTransform, per capire quanto grande è stato ridimensionato.

Aggiornamento: In Firefox 12 e versioni successive e Chrome/Safari - come Alex dice di seguito, è possibile utilizzare getBoundingClientRect() per tener conto di eventuali trasformazioni applicate a un elemento

Il passaggio scala parte da 50%/50 % perché è il comportamento corretto predefinito &. Se si desidera che inizi dall'origine, è necessario impostare l'origine di trasformazione: 0% 0%;

fonte

2011-04-29 17:58:17

Ho provato con window.getComputedStyle (el) .getWidth() ma mi ha comunque dato lo stesso risultato, pensi che dovrei recuperare un altro parametro? – holographix

ok, ho estratto la matrice di trasformazione, ma l'unica cosa che mi dice, è qualcosa che già conosco: 'matrix (1.18577, 0, 0, 1.18577, 0px, 0px)' questo dato è inutile per me, perché io conosco già quale rapporto di scala ho applicato all'elemento; Avrei preferito la nuova dimensione del mio oggetto in scala – holographix

Se hai solo bisogno di conoscere le coordinate ('offsetLeft',' offsetTop'), l'origine della trasformazione nell'angolo in alto a sinistra ('0% 0%') funziona perfettamente – aross

Prendo il tag span con display:block? le trasformazioni dovrebbero funzionare solo per elementi di blocco. Quando ho goto console e carico jquery (solo per facilità) e fanno questo:

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

non succede nulla. Ma se faccio questo:

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

improvvisamente cambia, ed aumenta offsetHeight. Deludentemente, l'altezza di offset va da 16 a 19, e non a 32 (anche se l'aspetto visivo è il doppio della dimensione e forse è accurato) - ma almeno sembra funzionare come pubblicizzato.

fonte

2011-05-03 18:50:13

Sì, le trasformazioni non sono supportate dagli elementi inline visualizzati nel webkit, sebbene le specifiche specifichino esplicitamente che dovrebbero essere. –

è bello, 'anche se ho appena letto l'altro giorno come si suppone che le trasformazioni influenzino solo gli elementi di blocco: P sembra essere un cambiamento recente almeno. in entrambi i casi, il punto rimane: le trasformazioni hanno effetto le proprietà HTMLElement, esplicitamente l'offsetHeight e offsetWidth –

-1

getBoundingClientRect() non ha funzionato per me (in Chrome 49).

Questa risposta mi ha portato a un'altra soluzione al mio problema: https://stackoverflow.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

fonte

2016-05-15 04:55:15 ricka

Recupera larghezza/altezza di un elemento ridimensionato css3

risposta

Problemi correlati