Không thể lấy giá trị của tài sản ký quỹ từ kết quả getComputedStyle

Question

Kết quả của một getComputedStyle chứa thuộc tính có tên "lề", nhưng thuộc tính luôn là một chuỗi rỗng ("") trong Mozilla Firefox hoặc Apple Safari; tuy nhiên, trong Internet Explorer (và Google Chrome) thuộc tính lề chứa giá trị mong đợi (ngay cả trong IE 6). Cùng một kết quả được trả về khi sử dụng phương thức getPropertyValue("margin") của đối tượng được trả về.

Làm cách nào tôi có thể nhận được giá trị tính toán của lợi nhuận trong Firefox và Safari?

var el = document.body.appendChild(document.createElement('div')); 
 
el.style.margin = '2px'; 
 
console.log(getComputedStyle(el, null).margin === ""); // false in IE and Chrome 
 
console.log(getComputedStyle(el, null).getPropertyValue("margin") === ""); // same

Answer 1

Các getComputedStyle() chức năng should not evaluate the values of shorthand properties (như margin, padding), chỉ longhand tài sản (như margin-top, margin-bottom, padding-top). Trong trường hợp các thuộc tính viết tắt, nó chỉ trả về một chuỗi rỗng.

var el = document.body.appendChild(document.createElement('div')); 
 
el.style.margin = '2px'; 
 
var computed = getComputedStyle(el); 
 

 
var longhands = ['margin-top', 'margin-bottom', 'margin-left', 'margin-right']; 
 
longhands.forEach(function(e) { console.log(e + ': ' + computed.getPropertyValue(e)) });

Bên cạnh đó, bạn có thể có một cái nhìn tại this link kiếm một giải pháp qua trình duyệt, trong đó sử dụng currentStyle cho internet explorer

Answer 2

var elem = document.getElementById("your-div"); 
if (elem.currentStyle) { 
    var margin = elem.currentStyle.margin; 
} else if (window.getComputedStyle) { 
    var margin = window.getComputedStyle(elem, null).getPropertyValue("margin"); 
} 

alert(margin); 

bạn có thể sử dụng shim này, làm việc cho tất cả các trình duyệt: tham khảo this

sử dụng currentStyle cho Internet Explorer.

sử dụng getComputedStyle cho các trình duyệt khác

Answer 3

tôi đã cố gắng một cái gì đó như thế này và nó đang làm việc cho tôi trong tất cả các trình duyệt

var elem = document.createElement('div'); 

var t=document.createTextNode('M') 
elem.appendChild(t); 
document.body.appendChild(elem); 

var myfontSize = getStyle(elem,"fontSize") 
alert(myfontSize) 

function getStyle(elem,prop){ 
if (elem.currentStyle) { 
var res= elem.currentStyle.margin; 
} else if (window.getComputedStyle) { 
if (window.getComputedStyle.getPropertyValue){ 
var res= window.getComputedStyle(elem, null).getPropertyValue(prop)} 
else{var res =window.getComputedStyle(elem)[prop] }; 
} 
return res; 
} 

Answer 4

Bắt một thuộc tính của giao diện này là tương đương với cách gọi getPropertyValue phương pháp của giao diện CSSStyleDeclaration

http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleDeclaration

Vấn đề như David Flanagan precised trong 'Javascript hướng dẫn dứt khoát' là về chỉ phong cách tính:

• Thuộc tính cắt ngắn không được tính, chỉ các thuộc tính cơ bản dựa trên thuộc tính đó. Không truy vấn thuộc tính ký quỹ, ví dụ: , nhưng sử dụng marginLeft, marginTop, v.v.

Và đây là stackoverflow answer để sao lưu.