Javascript 更改div'；动态地修改属性

所以我想创建一个Menorah，我想通过点击按钮点亮蜡烛，让蜡烛变短，比如说，每秒钟变短5px（确保这个值可以更改）。我被动画迷住了。我知道我需要访问div的属性，例如高度，还需要移动蜡烛的灯光，但我真的不知道如何才能做到这一点

以下是我目前的代码：

var lightOn=document.createElement（“按钮”）；
lightOn.textContent=“Light Menorah！”；
文件.正文.附件（lightOn）；
lightOn.onclick=setInterval（烛光，1000）；
功能烛光（）{
document.getElementsByClassName（“蜡烛”）.innerHTML=style.height-10；
}

。蜡烛{
背景颜色：蓝色；
宽度：35px；
高度：90px；
右边距：10px；
浮动：左；
}
主蜡烛{
背景颜色：蓝色；
宽度：35px；
高度：120px；
右边距：10px；
浮动：左；
}
.光{
背景颜色：黄色；
宽度：35px；
高度：40px；
浮动：左；
右边距：10px；
}
#灯光{
}
#手柄{
显示：块；
位置：相对位置；
填充顶部：40px；
}

光明节快乐，爱丽丝

您需要检查从

getElementsByClassName

获得的所有元素（该函数返回一个元素列表，因此您不能真正使用

.innerHTML

），并且对于每个元素，您都需要更改元素的高度

您遇到的另一个问题是，如果使用外部CSS文件设置高度，则无法使用元素的

样式.height

。您需要使用

getComputedStyle

函数

我下面的例子不会解决你所有的问题，但它会给你一个好的开始（我认为这是解决其他问题的一般方法）

您仍然需要解决定位问题

var lightOn=document.createElement（“按钮”）；
lightOn.textContent=“Light Menorah！”；
文件.正文.附件（lightOn）；
lightOn.onclick=函数（）{
设置间隔（烛光，1000）；
}
功能烛光（）{
Array.prototype.forEach.call(
document.getElementsByClassName（“蜡烛”），函数（e）{
高度=window.getComputedStyle（e，null）.getPropertyValue（“高度”）
if（parseInt（高度））{
e、 style.height=（parseInt（height）-10）+'px'；
}
})
}

。蜡烛{
背景颜色：蓝色；
宽度：35px；
高度：90px；
右边距：10px；
浮动：左；
}
主蜡烛{
背景颜色：蓝色；
宽度：35px；
高度：120px；
右边距：10px；
浮动：左；
}
.光{
背景颜色：黄色；
宽度：35px；
高度：40px；
浮动：左；
右边距：10px；
}
#灯光{
}
#手柄{
显示：块；
位置：相对位置；
填充顶部：40px；
}

---

以下是收缩蜡烛所需的逻辑。您的

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

  返回一个元素数组，元素本身具有

  样式

  成员，该成员具有

  高度

  ，也具有

  内部HTML

  ，但数组本身没有这些元素
• 将

  height

  值指定给

  innerHTML

• 由于您的

  高度是以像素为单位测量的，因此它肯定以
  的“px”
  结尾，并且是一个文本数据。因此，你不能从中减去10。在我的代码建议中，我从字符串中删除了
  “px”
  ，并将其解析为整数调用
  parseInt

---

Alice，你能创建一个JSFIDLE吗？祝大家圣诞快乐！你现在。。。这里的一切都已经存在于我的答案中：）你也可以投它一票up@DekelgetElementsByClassName返回数组，而不是列表。我的解释也更详细。尽管如此，我还是在很久以前对你的答案投了赞成票。感谢@LajosArpad:）的回复，事实上，

getElementsByClassName

函数返回一个类似数组的对象（不完全是数组，这就是为什么我不能在我的示例中直接在该对象上使用

forEach

。这就是我使用

列表

word的原因。谢谢你的投票！你也得到了我的：）谢谢你的解释，他们也帮助我澄清了这个问题！非常感谢您，我将尝试修复定位。我真的被逻辑部分卡住了，所以你的解释很有用！