Javascript 是否保存特定的BoundingClientRect？

我正在使用getBoundingClientRect将元素位置更改为绝对位置，而不更改其位置：

   style.position = 'absolute'
   style.top = container.getBoundingClientRect().top
   style.left = container.getBoundingClientRect().left
   style.width = container.offsetWidth

我这样做是为了以后将元素转换为全屏，如下所示：

  style.top = 0
  style.left = 0
  style.width = '100%'
  style.height = '100%'
  style.transitionProperty = 'top, left, width, height'
  style.transitionDuration = '.2s'

样式是转换为css属性的javascript对象

---

稍后，我想关闭全屏，并将元素还原回其原始大小。我想将getBoundingClientRect中的值保存为第一次转换时的值。这可以做到吗？

是的，可以做到。像这样：

var bcr = container.getBoundingClientRect();
style.width = '100%';
// later
style.width = bcr.width;

var el=document.querySelector（'div'）；
var bcr=null；
document.querySelector（'button'）。addEventListener（'click'，function（）{
如果（bcr）{//当前全屏显示
el.style.position=''；
el.style.top=bcr.top+‘px’；
el.style.left=bcr.left+'px'；
el.style.width=bcr.width+‘px’；
el.style.height=bcr.height+'px'；
bcr=null；
}否则{
bcr=el.getBoundingClientRect（）；
el.style.position='绝对'；
el.style.top=el.style.left=0；
el.style.width=el.style.height='100%'；
}
});
div{
背景：黄色；
高度：100px；
宽度：300px；
}

全屏切换
如果您的
样式
对象中已经存在这些值，具体问题是什么？当我更改元素的大小时，这些值会发生变化，并且我已经用0和100%重写了值w，因此我需要以某种方式将其保存到以后。是否可以存储
getBoundingClientRect（）返回的对象
作为元素的另一个属性…然后稍后通过相同的属性名访问它。你的意思是基本上将其转换为字符串吗？不完全是，不需要转换其类型
container.originalRect=container.getBoundingClientRect（）
。但也可以将其存储在变量、本地存储或任何您想要的地方