Question

所以我想制作一个Menorah，我想通过点击按钮点亮蜡烛，然后让蜡烛变短，让我们说，每秒钟5px（确保这个值可以改变）。我停留在动画上。我知道我需要访问div的属性，例如高度，还要移动蜡烛的光，但我真的不知道我该怎么做。

到目前为止，这是我的代码：

＆＃13;

var lightOn = document.createElement("BUTTON");
lightOn.textContent = "Light Menorah!";
document.body.appendChild(lightOn);
lightOn.onclick = setInterval (candleLight,1000);
function candleLight () {
    document.getElementsByClassName("candles").innerHTML = style.height-10;
    }

＆＃13;

.candles {
    background-color: blue;
    width: 35px;
    height: 90px;
    margin-right: 10px;
    float: left;
  }
  .mainCandle {
    background-color: blue;
    width: 35px;
    height: 120px;
    margin-right: 10px;
    float: left;
  }
  .light {
    background-color: yellow;
    width: 35px;
    height: 40px;
    float: left;
    margin-right: 10px;
  }
  #theLight {
  }
  #theCandle {
    display:block;
    position: relative;
    padding-top: 40px;
  }

＆＃13;

<div id = "theLight">
  <div class = "light"></div>
  <div class = "light"></div>
  <div class = "light"></div>
  <div class = "light"></div>
  <div class = "light"></div>
  <div class = "light"></div>
  <div class = "light"></div>
  <div class = "light"></div>
  <div class = "light"></div>
</div>
<div id = "theCandle">
  <div class = "candles"></div>
  <div class = "candles"></div>
  <div class = "candles"></div>
  <div class = "candles"></div>
  <div class = "mainCandle"></div>
  <div class = "candles"></div>
  <div class = "candles"></div>
  <div class = "candles"></div>
  <div class = "candles"></div>
</div>

＆＃13;

Answer 1

光明节快乐爱丽丝！

你需要查看从getElementsByClassName获得的所有元素（该函数返回一个元素列表，因此你不能真正使用.innerHTML），并且每个元素都会你需要改变元素的高度。

您遇到的另一个问题是，如果使用外部CSS文件设置高度，则无法使用元素的style.height。您需要使用getComputedStyle函数。

下面的示例不会修复所有您的问题，但它会给您一个良好的开端（以及解决所有其他问题的一般方法）。

您仍然需要解决定位问题。

var lightOn = document.createElement("BUTTON");
  lightOn.textContent = "Light Menorah!";
  document.body.appendChild(lightOn);
  lightOn.onclick = function() {
    setInterval (candleLight,1000);
  }
  function candleLight () {
    Array.prototype.forEach.call(
    document.getElementsByClassName("candles"), function(e) {
      height = window.getComputedStyle(e,null).getPropertyValue("height")
      if (parseInt(height)) {
        e.style.height = (parseInt(height)-10) + 'px';
      }
    })
  }

.candles {
    background-color: blue;
    width: 35px;
    height: 90px;
    margin-right: 10px;
    float: left;
  }
  .mainCandle {
    background-color: blue;
    width: 35px;
    height: 120px;
    margin-right: 10px;
    float: left;
  }
  .light {
    background-color: yellow;
    width: 35px;
    height: 40px;
    float: left;
    margin-right: 10px;
  }
  #theLight {
  }
  #theCandle {
    display:block;
    position: relative;
    padding-top: 40px;
  }

<div id = "theLight">
  <div class = "light"></div>
  <div class = "light"></div>
  <div class = "light"></div>
  <div class = "light"></div>
  <div class = "light"></div>
  <div class = "light"></div>
  <div class = "light"></div>
  <div class = "light"></div>
  <div class = "light"></div>
</div>
<div id = "theCandle">
  <div class = "candles"></div>
  <div class = "candles"></div>
  <div class = "candles"></div>
  <div class = "candles"></div>
  <div class = "mainCandle"></div>
  <div class = "candles"></div>
  <div class = "candles"></div>
  <div class = "candles"></div>
  <div class = "candles"></div>
</div>

如果还不清楚 - 请询问：）

Answer 2

这是缩小蜡烛所需的逻辑。您的setInterval会使其定期发布。

var candles = undefined;
function candleLight () {
    if (candles === undefined) {
        candles = document.getElementsByClassName("candles")
    }

    for (var candleIndex in candles) {
        candles[candleIndex].style.height = parseInt(candles[candleIndex].style.height.replace("px", "")) + "px";
    }
}

你的错误是：

document.getElementsByClassName返回一个元素数组，这些元素本身有style成员，其成员height也有innerHTML，但数组本身也有没有那些
将height值分配给innerHTML
由于您的height以像素为单位，因此肯定以"px"结尾，并且是文本数据。因此，您不能从中减去10。这在我的代码建议中得到了解决，我从字符串中删除"px"并将其解析为整数调用parseInt

动态更改div的属性

2 个答案: