Chiều rộng phần tử DOM trước khi được thêm vào DOM

Question

Tôi chắc chắn câu trả lời là không, nhưng có thể xác định chiều rộng của một phần tử trước nó được nối vào DOM không?

Sau khi được nối, tôi biết tôi có thể sử dụng offsetWidth và offsetHeight.

Cảm ơn

Answer 1

Bí quyết là để hiển thị các phần tử (display: block) mà còn giấu nó (visibility: hidden) và để thiết lập vị trí của nó để tuyệt đối để nó không ảnh hưởng đến dòng chảy trang.

Lớp MooTools Element.Measure làm điều này, như Oscar đã đề cập.

Answer 2

Không thể, ít nhất là không chính xác, bởi vì kiểu dáng ảnh hưởng đến các thuộc tính này và vị trí đặt nó xác định cách nó được tạo kiểu và quy tắc nào ảnh hưởng đến nó. Ví dụ: đặt <p></p> trong trang theo mặc định sẽ là chiều rộng của phần thân nếu được thêm vào dưới dạng con, nhưng nếu bạn gắn nó vào bên trong ví dụ: <div style="width: 100px;"></div>, thì bạn sẽ thấy cách nhanh chóng thay đổi mọi thứ.

Answer 3

Những gì bạn có thể làm với MooTools là sử dụng lớp Element.Measure - có nghĩa là bạn đưa phần tử vào DOM, nhưng giữ cho nó ẩn đi. Bây giờ, bạn có thể đo lường phần tử mà không thực sự hiển thị nó.

http://mootools.net/docs/more/Element/Element.Measure

Answer 4

Chức năng Mootools Element.Measure mà Oscar đề cập là tuyệt vời. Đối với những người sử dụng jQuery, đây là một plugin nhanh chóng mà hoàn thành được điều tương tự: (! Nhờ Sam Fen đã chỉ ra rằng)

$.fn.measure = (fn)-> 
    el = $(this).clone(false) 
    el.css 
    visibility: 'hidden' 
    position: 'absolute' 
    el.appendTo('body') 
    result = fn.apply(el) 
    el.remove() 
    return result 

Bạn có thể gọi nó như thế này, đảm bảo để trả về giá trị:

width = $('.my-class-name').measure(function(){ return this.width() }) 

Answer 5

Sửa đổi mã một chút. Dưới đây là một giải pháp JS tinh khiết:

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