Lấy chiều rộng/chiều cao của phần tử có tỷ lệ css3

Question

Tôi đang chiến đấu chống lại sự kỳ quặc (tôi nghĩ) của thuộc tính offsetWidth.
đây là kịch bản:

Tôi đã có, chúng ta hãy nói, một thẻ khoảng, trong js của tôi, tại một thời điểm nào đó tôi thực hiện một css3 chuyển đến yếu tố này, như:

 el.set('styles', { 
      'transform':'scale('+scale+', '+scale+')',  /* As things would be in a normal world */ 
      '-ms-transform':'scale('+scale+', '+scale+')',  /* IE 9 */ 
      '-moz-transform':'scale('+scale+', '+scale+')',   /* Moz */ 
      '-webkit-transform':'scale('+scale+', '+scale+')', /* Safari/Chrome */ 
      '-o-transform':'scale('+scale+')'  /* Oprah Winfrey */ 
     }); 
     w = el.getWidth(); 
     console.log('after scaling: ' + w); 

tại thời điểm này nhật ký trả lại cho tôi các giá trị mờ, như nó không biết phải nói gì.
bất kỳ đề xuất nào?

Answer 1

getBoundingClientRect() trả lại giá trị chính xác cho tôi.

jsFiddle.

Answer 2

Biến đổi không ảnh hưởng đến các thuộc tính CSS nội tại, vì vậy bạn đang thấy hành vi đúng. Bạn cần phải nhìn vào ma trận chuyển đổi hiện tại - như được trả về từ getComputedStyle(). WebkitTransform để tìm hiểu xem một cái gì đó lớn đã được thu nhỏ như thế nào.

Cập nhật: Trong Firefox 12 và sau đó và Chrome/Safari - như Alex nói dưới đây, bạn có thể sử dụng getBoundingClientRect() để đưa vào tài khoản bất kỳ biến đổi áp dụng cho một yếu tố

Việc chuyển đổi quy mô bắt đầu từ 50%/50 % vì đó là hành vi chính xác mặc định của &. Nếu bạn muốn nó bắt đầu từ nguồn gốc, thì bạn cần phải thiết lập biến đổi nguồn gốc: 0% 0%;

Answer 3

Tôi lấy thẻ span có display:block? biến đổi chỉ được sử dụng cho các phần tử khối. Khi tôi goto console và jquery tải (chỉ để dễ) và làm như sau:

$('span#foo').css({"-webkit-transform": "scale(2.0, 2.0)"})

có gì xảy ra. Nhưng nếu tôi làm điều này:

$('span#foo').css('display','block').css({"-webkit-transform": "scale(2.0, 2.0)"})

đột nhiên nó thay đổi, và offsetHeight tăng. Thật không may, các hight bù đi từ 16-19, và không đến 32 (mặc dù hình ảnh trực quan là gấp đôi kích thước và có thể nó là chính xác) - nhưng ít nhất nó xuất hiện để làm việc như quảng cáo.

Answer 4

getBoundingClientRect() không hoạt động đối với tôi (trong Chrome 49).

Câu trả lời này dẫn tôi đến một giải pháp cho vấn đề của tôi: https://stackoverflow.com/a/7894886/1699320

function getStyleProp(elem, prop){ 
    if(window.getComputedStyle) 
     return window.getComputedStyle(elem, null).getPropertyValue(prop); 
    else if(elem.currentStyle) return elem.currentStyle[prop]; //IE 
} 
getStyleProp(element, 'zoom') //gives zoom factor to use in calculations