動態更改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