javascript - 如何提前获取元素属性(不是在我调用函数时)

Question

这里有一些代码，比如旋转木马。
问题是当我第一次按向右箭头时无法切换到第二张卡。我认为这是因为函数不知道 cardStack left 属性等于 -20px。但是当我将这段代码 var l = cardStack.left; 添加到一个函数中时，它工作正常。但据我所知，每次调用函数时都提及 document. 并不是一个好主意。我需要你的建议

var cardStack = document.getElementById('allCards');
var l = cardStack.left;

document.onkeydown = cardsShifting;

function cardsShifting(e) {
  switch (e.keyCode) {
    case 37:
      shiftCard('left');
      break;
    case 39:
      shiftCard('right');
      break;
  }
}

function shiftCard(direction) {
  if (direction === 'right') {
    l = l - 640;

    if (l >= -5780) {
      cardStack.style.left = l + 'px';
    } else {
      l = -20;
      cardStack.style.left = l + 'px';
    }
  }
}

#allCards {
  position: relative;
  width: 6400px;
  height: 400px;
  left: -20px;
  display: inline-block;
}

#currentCardWindow {
  position: absolute;
  width: 600px;
  height: 420px;
  top: 50%;
  left: 50%;
  margin-top: -200px;
  margin-left: -300px;
  overflow: hidden;
  box-sizing: border-box;
}

.card {
  position: relative;
  width: 600px;
  height: 400px;
  float: left;
  margin: 0 20px;
}

<div id="currentCardWindow">
  <div id="allCards">
    <div class="card">card 1</div>
    <div class="card">card 2</div>
    <div class="card">card 3</div>
    <div class="card">card 4</div>
    <div class="card">card 5</div>
    <div class="card">card 6</div>
    <div class="card">card 7</div>
    <div class="card">card 8</div>
    <div class="card">card 9</div>
    <div class="card">card 10</div>
  </div>
</div>

Answer 1

当您执行 cardStack.style.left 时，您实际上并不是在查看 CSS，而是在查看元素的样式属性。幸运的是，有一种方法可以查看 CSS!我们可以使用 getComputedStyle .

The window.getComputedStyle() method returns an object that reports the values of all CSS properties of an element after applying active stylesheets and resolving any basic computation those values may contain. Individual CSS property values are accessed through APIs provided by the object or by simply indexing with CSS property names.

有了它，您可以执行 window.getComputedStyle(cardStack) 来获取所有 CSS 样式，然后您可以将 getPropertyValue("left") 添加到查看 left 属性。这将返回 -20px 但我们想忽略 px 我们可以使用 parseInt 来做到这一点。

我已将所有内容放在这个片段中。

var cardStack = document.getElementById('allCards');
var l = parseInt(window.getComputedStyle(cardStack).getPropertyValue("left"));

document.onkeydown = cardsShifting;

function cardsShifting(e) {
  switch (e.keyCode) {
    case 37:
      shiftCard('left');
      break;
    case 39:
      shiftCard('right');
      break;
  }
}

function shiftCard(direction) {
  if (direction === 'right') {
    l = l - 640;

    if (l >= -5780) {
      cardStack.style.left = l + 'px';
    } else {
      l = -20;
      cardStack.style.left = l + 'px';
    }
  }
}

#allCards {
  position: relative;
  width: 6400px;
  height: 400px;
  left: -20px;
  display: inline-block;
}

#currentCardWindow {
  position: absolute;
  width: 600px;
  height: 420px;
  top: 50%;
  left: 50%;
  margin-top: -200px;
  margin-left: -300px;
  overflow: hidden;
  box-sizing: border-box;
}

.card {
  position: relative;
  width: 600px;
  height: 400px;
  float: left;
  margin: 0 20px;
}

<div id="currentCardWindow">
  <div id="allCards">
    <div class="card">card 1</div>
    <div class="card">card 2</div>
    <div class="card">card 3</div>
    <div class="card">card 4</div>
    <div class="card">card 5</div>
    <div class="card">card 6</div>
    <div class="card">card 7</div>
    <div class="card">card 8</div>
    <div class="card">card 9</div>
    <div class="card">card 10</div>
  </div>
</div>

希望对您有所帮助。