我需要在js中創建CSS類的多個實例

Question

我在CSS中有一個名為toast的基類，其中包括我的所有基本樣式，並帶有一個javascript函數，該函數傳遞了toast類型以根據用戶輸入創建以提供反饋。 此函數編輯我的吐司類，並添加了一些圖標和文本，如下所示：

#toast {
        visibility: hidden;
        width: 200px;
        min-height: 40px;
        max-height: 100px;
        border-radius: 5px;
        //and a whole bunch more styling
        }

然后我的js：

function showToast(type) {
    var label = null;
    var iconElement = null;
    var i = document.getElementById("toast")

    switch (type) {
        case 'success':
            i.style.border = 'solid 1px #007700';
            label = "SUCCESS";
            iconElement = "icons/success.png";
            break;
           //and then a bunch more cases for my other types
    }

    document.getElementById("title").innerHTML = label;
    document.getElementById("icon").src = iconElement;
    i.style.visibility = 'visible';
}

當前，每次我調用函數創建新的吐司時，它都會替換舊的吐司，但是我想對其進行更新，以便它們可以堆疊並能夠一次輸出多個反饋。 如何創建CSS類的多個實例，以免每次調用構造函數時它們都不會被覆蓋？

Answer 1

您可能會給每個元素都添加ID，祝酒。 因此，當您運行此行（缺少分號（;））時：

var i = document.getElementById("toast")

您只是一遍又一遍地獲取具有吐司ID的第一個元素，並將其替換。

您可能想要做的就是為您的toast元素分配一個類。

它可能看起來像這樣：

<div id="genericToast1" class="toast"></div>
<div id="successToast1" class="toast success"></div>
<div id="burntToast1" class="toast burnt"></div>

然后在CSS中，您可以使用類選擇器來修改它們，如下所示：

.toast 
{
    visibility: hidden;
    width: 200px;
    min-height: 40px;
    max-height: 100px;
    border-radius: 5px;
    //and a whole bunch more styling
}

.toast.success
{
//More styling for this kind of toast...
}

.toast.burnt
{
//More styling...
}

不需要JS！