Jestem pewien, że odpowiedź brzmi nie, ale czy możliwe jest określenie szerokości elementu przed jest dołączony do DOM?DOM Szerokość elementu przed dołączeniem do DOM
Po to dołączane, wiem, że mogę używać offsetWidth i offsetHeight.
Dzięki
Sztuką jest pokazać element (display: block), ale również ukryć go (visibility: hidden) i ustawić jego pozycję na absolutną, tak że nie ma wpływu na przepływ strony.
Klasa MooTools Element.Measure robi to, jak wspomniano Oscar.
To nie jest możliwe, przynajmniej nie dokładnie, bo stylizacji wpływa te właściwości, a tam gdzie to umieścić określa, jak to jest stylizowany i co wpływa na to reguły.
Na przykład umieszczenie na stronie <p></p> będzie domyślnie szerokością ciała, jeśli zostanie do niej dołączone jako dziecko, ale jeśli wstawiłeś ją do wnętrza, na przykład <div style="width: 100px;"></div>, zobaczysz, jak szybko to zmienia.
Co można zrobić z MooTools jest użyć klasy Element.Measure - oznacza to, wstrzyknąć elementem DOM, ale utrzymać go w ukryciu. Teraz możesz zmierzyć element bez pokazywania go.
+1 Niezły, kolejny fajny klejnot MooTools. Dzięki. – Steve
Funkcja Mootools Element.Measure, o której wspomniał Oscar, jest niesamowita. Dla tych, którzy używać jQuery, oto szybkie plugin, który realizuje to samo: (! Dzięki Sam Fen za wskazanie, że obecnie)
$.fn.measure = (fn)->
el = $(this).clone(false)
el.css
visibility: 'hidden'
position: 'absolute'
el.appendTo('body')
result = fn.apply(el)
el.remove()
return result
można nazwać to w ten sposób, upewniając się, aby zwrócić wartość:
width = $('.my-class-name').measure(function(){ return this.width() })
Wiem, że zostało to opublikowane dawno temu, ale dla kogoś takiego jak ja, który próbuje zastosować to, musisz * zwrócić * wartość w funkcji, którą przekazujesz. Tak więc 'width = $ ('. Moje-class-name ') .measure (function() {return this.width()})' –
Zaktualizowany - dzięki @SamFen. :) – jpadvo
Świetne rzeczy. Obecnie używa go z RequireJS - https://gist.github.com/simonsmith/5135933 –
Trochę zmodyfikował kod. Oto czystego roztworu 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, a dodatkowe: element w rzeczywistości nie być świadczone aż prąd wykonanie JavaScript oporu. Oznacza to, że możesz dodawać, uzyskiwać wymiary i usuwać ponownie bez żadnego wizualnego wskazania, że coś się stało. –