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

В настоящее время 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>


javascript html css rect getboundingclientrect
person darrylyeo    schedule 03.01.2017    source источник
comment
Почему бы не удалить свойство преобразования, измерить его, а затем снова добавить свойство?   -  person Jacob Gray    schedule 03.01.2017
comment
Я думал сделать это, но моя интуиция подсказывает мне, что должен быть более простой способ. Я был бы очень удивлен, если бы для этого не было встроенного.   -  person darrylyeo    schedule 03.01.2017
comment
stackoverflow.com/questions/27745438 /   -  person Jacob Gray    schedule 03.01.2017

Ответы (1)


arrow_upward
3
arrow_downward

Вот уже ответ, вы можете прочитать больше в этом сообщении: Как получить фактическую ширину и высоту HTML-элемента?

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

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>

person Wenli He    schedule 03.01.2017