Sono sicuro che la risposta è no, ma è possibile determinare la larghezza di un elemento prima del che viene aggiunto al DOM?DOM Larghezza elemento prima aggiunta al DOM
Una volta aggiunto, so che posso usare offsetWidth e offsetHeight.
Grazie
Il trucco è quello di mostrare l'elemento (display: block), ma anche nasconderlo (visibility: hidden) e per impostare la sua posizione a assoluta in modo che non influisce sul flusso di pagina.
La classe MooTools Element.Measure fa questo, come ha menzionato Oscar.
non è possibile, almeno non accuratamente, perché styling colpisce queste proprietà, e dove verrà posizionato determina la modalità di stile e quali regole incidono su di esso.
Ad esempio, il posizionamento di un <p></p> nella pagina corrisponderà per impostazione predefinita alla larghezza del corpo se aggiunto come un bambino, ma se lo si è appostato all'interno ad esempio a <div style="width: 100px;"></div>, si vedrà come questo cambi rapidamente le cose.
Quello che puoi fare con MooTools è usare la classe Element.Misura - cioè, devi iniettare l'elemento nel DOM, ma tenerlo nascosto. Ora puoi misurare l'elemento senza effettivamente mostrarlo.
+1 Nice, un'altra bella gemma MooTools. Grazie. – Steve
L'elemento Mootools. La funzionalità di misura menzionata da Oscar è eccezionale. Per coloro che utilizzano jQuery, ecco un rapido plugin che compie la stessa cosa: (grazie Sam Fen per la segnalazione)
$.fn.measure = (fn)->
el = $(this).clone(false)
el.css
visibility: 'hidden'
position: 'absolute'
el.appendTo('body')
result = fn.apply(el)
el.remove()
return result
si può chiamare così, avendo cura di restituire il valore:
width = $('.my-class-name').measure(function(){ return this.width() })
So che questo è stato postato molto tempo fa, ma per chiunque come me che cerca di applicare questo, è necessario * restituire * il valore nella funzione che si passa. Quindi 'width = $ ('. My-class-name ') .measure (function() {return this.width()})' –
Aggiornato - grazie a @SamFen. :) – jpadvo
Grandi cose. Attualmente in uso con RequireJS - https://gist.github.com/simonsmith/5135933 –
Modificato leggermente il codice. Ecco una soluzione pura JS:
function measure(el, fn) {
var pV = el.style.visibility,
pP = el.style.position;
el.style.visibility = 'hidden';
el.style.position = 'absolute';
document.body.appendChild(el);
var result = fn(el);
el.parentNode.removeChild(el);
el.style.visibility = pV;
el.style.position = pP;
return result;
}
var div = document.createElement('div');
div.innerHTML = "<p>Hello</p><br/>";
alert(div.offsetHeight); // 0
alert(measure(div, function(el){return el.offsetHeight})); // 68
+1, con ulteriore: l'elemento non sarà effettivamente reso finché la corrente di esecuzione JavaScript ferma. Ciò significa che è possibile aggiungere, ottenere le dimensioni e rimuovere di nuovo senza alcuna indicazione visiva che qualcosa è successo. –