Question

我使用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'

Style是一个转换为css-properties的javascript对象。

稍后我想关闭全屏事物并将元素恢复为原始尺寸。我想保存getBoundingClientRect中的值，因为它们是在第一次转换时。可以这样做吗？

Answer 1

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

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() {
  if (bcr) { // Currently fullscreen
    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;
  } else {
    bcr = el.getBoundingClientRect();
    el.style.position = 'absolute';
    el.style.top = el.style.left = 0;
    el.style.width = el.style.height = '100%';
  }
});

div {
  background: yellow;
  height: 100px;
  width: 300px;
}

<div>
  <button>Toggle fullscreen</button>
</div>

那就是说，很可能你不需要它，因为只是将样式分配给空字符串就可以了。

保存特定的BoundingClientRect？

1 个答案: