Question

对于这个令人费解的问题感到抱歉。

为什么这样：

function captureEl(el) {
  var elInt     = document.getElementById(el),           // element
      elBottom  = elInt.getBoundingClientRect().bottom;  // px distance from top of page to bottom of element

  console.log(elBottom);
  console.log(elInt);

  console.log(elBottom);

  var newEl = document.getElementById(el);

  console.log(newEl.getBoundingClientRect().bottom);

  console.log(newEl);

  elInt.style.bottom = '300px';

}

产量输出如下：

711
<header id="header" style="bottom: 300px;">…</header>
711
711
<header id="header" style="bottom: 300px;">…</header>

我知道getBoundingClientRect（）。bottom和style属性是不同的数字，我不明白为什么更改样式属性会影响我之前存储的值。

似乎第一个控制台条目不应该附加CSS属性。

编辑：

HTML：

<header id="header">
   <div class="container">...</div>
</header>

CSS：

header {
  position: absolute;
  top: 25%;
  bottom: 25%;
  width: 100%;
  background: rgba(17,17,17,0.95);
  box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
  transition: bottom 1s linear;
}

编辑2：

因此，设置计算样式的变量会做同样的事情。

function captureEl(el) {
  var elInt     = document.getElementById(el),            // element
      elBottom  = elInt.getBoundingClientRect().bottom,   
      elStyle   = window.getComputedStyle(elInt);

  console.log(elStyle);

  console.log('---');

  var newEl = document.getElementById(el);

  newEl.style.bottom = '300px';

  console.log(window.getComputedStyle(newEl));

  console.log('---');

  elInt.style.bottom = '300px';

  console.log(elStyle);

}

3个日志的计算输出显示300px的底部

更改元素样式属性更改存储的元素样式属性

0 个答案: