动态更改div的属性

Question

所以我想创建一个Menorah，点击按钮点燃蜡烛，让蜡烛变得更短，比方说每秒5px（肯定可以改变这个值）。我被卡在动画上。我知道我需要访问div的属性，例如高度，并且还可以移动蜡烛的灯光，但我实际上不知道如何才能做到这一点。

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

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; 
 
    }

.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 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返回元素的数组，并具有height，自己也是有style件上的元素，有innerHTML，但阵列本身不具备这些
• 这是一个合乎逻辑的错误，因为你height来分配height价值的innerHTML
• 我s以像素为单位，它肯定以"px"结尾，并且是文本数据。因此，你不能从中减去10。这是在我的代码建议中解决，我从字符串中删除"px"并解析为整数调用parseInt