时间戳

首页 > 解决方案 > 如何提前获取元素属性（不是在我调用函数时）

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

问题描述

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

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>

标签： javascripthtmlcss

解决方案

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

该window.getComputedStyle()方法返回一个对象，该对象在应用活动样式表并解决这些值可能包含的任何基本计算后报告元素的所有 CSS 属性的值。通过对象提供的 API 或简单地使用 CSS 属性名称进行索引来访问各个 CSS 属性值。

有了这个，你可以window.getComputedStyle(cardStack)得到所有的 CSS 样式，然后你可以添加getPropertyValue("left")到只是查看left属性。这会返回-20px，但我们想忽略可以使用 px 执行此操作的 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>

我希望你觉得这有帮助。

推荐阅读