Как получить прямоугольник элемента перед преобразованием?

В настоящее время Element.getBoundingClientRect() дает позицию и размеры элемента, но автоматически учитывает преобразования через свойство CSS transform. Как я могу получить прямоугольник без преобразование?Как получить прямоугольник элемента перед преобразованием?

В приведенном ниже примере я хотел бы, чтобы выход был 10 10 100 100.

const rect = div.getBoundingClientRect() 
 
document.write(`${rect.left} ${rect.top} ${rect.width} ${rect.height}`)

body { 
 
    margin: 10px; 
 
} 
 

 
div { 
 
    background: red; 
 
    width: 100px; 
 
    height: 100px; 
 
    transform: translate(1px, 1px) scale(0.5) 
 
}

<div id="div"></div>

источник

2017-01-03 darrylyeo

Почему бы не удалить свойство transform, измерить его, а затем добавить свойство снова? –

Я считал это, но моя кишка говорит мне, что должен быть более простой способ. Я был бы очень удивлен, если бы не было встроенного для этого. – darrylyeo

http://stackoverflow.com/questions/27745438/how-to-compute-getboundingclientrect-without-considering-transforms –

Вот уже ответ, вы можете прочитать на этой должности: How do I retrieve an HTML element's actual width and height?

Таким образом, вы можете получить фактическое значение "до" преобразования по изменение вашего кода на следующие

document.write(`${div.offsetLeft} ${div.offsetTop} ${div.offsetWidth} ${div.offsetHeight}`)

body { 
 
    margin: 10px; 
 
} 
 

 
div { 
 
    background: red; 
 
    width: 100px; 
 
    height: 100px; 
 
    transform: translate(1px, 1px) scale(0.5) 
 
}

<div id="div"></div>

источник

2017-01-03 02:41:05

Как получить прямоугольник элемента перед преобразованием?

ответ

Смежные вопросы