Làm thế nào để chuyển đổi giá trị ký quỹ css thành pixel chỉ bằng javascript đơn giản?

Question

Tôi đang tìm cách đơn giản nhất và vượt qua trình duyệt để chuyển đổi giá trị lề css thành phần html thành các pixel tuyệt đối. Ví dụ, lề là "tự động". Tôi không thể sử dụng bất kỳ khung công tác js nào.

Answer 1

Bạn muốn sử dụng window.getComputedStyle phương pháp:

var style = window.getComputedStyle(element, null); 
// style.marginLeft 

Dưới đây là một bản demo làm việc: http://jsfiddle.net/VxccZ/

Cập nhật

Đối với IE 8 trở lên (không hỗ trợ phương pháp này), sử dụng thuộc tính currentStyle của phần tử của bạn:

var style = element.currentStyle; 
// style.marginLeft 

Để tóm tắt:

var getMarginLeft = function (element) { 
    var style; 
    if (window.getComputedStyle) { style = window.getComputedStyle(element, null); } 
    else { style = element.currentStyle; } 

    return style.marginLeft; 
}; 

Tôi không chắc chắn 100% rằng currentStyle có giá trị số cho margin: auto. Bạn sẽ phải tự mình thử. Tôi không thể tự làm điều đó trên Mac.