如何在沒有內聯樣式的情況下將 CSS 應用於動態 JS 元素

Question

我是 web 開發的新手，我一直在嘗試將樣式應用於使用 javascript 生成的 div 元素，但我只能使用以下 ZC1C425268E68385D1AB5074C17A94F 手動執行此操作：

function addStyle(element) {
   rem = element.style;

   rem.fontSize = "16px"; 
   rem.background = "#fff"; 
   rem.color = "#333";
}

這適用於單個元素，但可能會創建數十個動態元素，它們都必須包含相同的內聯樣式。 我在其他地方讀到過，顯然這不是一個好習慣，如果可能的話應該避免。 因此，我希望這些 css 規則在單獨的文件中定義，以便我也可以訪問它們以獲取其他元素。
但是，無論他們的問題看起來多么相似，我都無法在網上的任何地方找到解決方案。 這是我的相關 HTML 代碼：

<h3 id="kudos_title">Kudos</h3>
<div class="remarks"></div>

我的 JS 創建新的 div 元素：

function addElement (i) {
        // create a new div element
        const newDiv = document.createElement("div");

        // Add message, author, and source to content
        const content = document.createTextNode('"' + `${msg[i].remark}` + '"' + " - " + `${msg[i].author}` + " from " + `${msg[i].source}`);
        
        // add the text node to the newly created div
        newDiv.appendChild(content);

        addStyle(newDiv, i);

        // add the newly created element and its content into the DOM
        const current_remark = document.querySelector(".remarks");

        document.body.insertBefore(newDiv, current_remark);
        
    }

最后，CSS：

#kudos_title {
    text-align: center;
    font-family: Spectral, serif;
    font-size: 50px;
}

.remarks {
    padding: 20px;
    color: pink;
    background-color: springgreen;
}

我應該提到 id=kudos_title 的標題已成功設置樣式，但 class 備注的任何部分都沒有。 很明顯，.css 文件被 static 元素識別，但 JS 創建的 div 不是。

Answer 1

您正在使用insertBefore它將在目標之前插入元素（因此不會插入其中）。 嘗試追加。 此外，最好將 HTML 實體用於文本中的引號等內容，因此我在這里使用了它們，展示了如何使用模板文字組合字符串。 要添加某些類，請使用element.classList.add()

 let msg = [{ remark: "test", author: "they", source: "there" }]; function addElement(i) { // create a new div element const newDiv = document.createElement("div"); // Add message, author, and source to content const content = `"${msg[i].remark}" - ${msg[i].author} from ${msg[i].source}`; // add the text node to the newly created div newDiv.innerHTML = content; newDiv.classList.add('special'); // add the newly created element and its content into the DOM const current_remark = document.querySelector(".remarks"); current_remark.append(newDiv); } addElement(0);

 #kudos_title { text-align: center; font-family: Spectral, serif; font-size: 50px; }.remarks { padding: 20px; color: pink; background-color: springgreen; }.special { color: #f00; font-weight: bold; }

 <h3 id="kudos_title">Kudos</h3> <div class="remarks"></div>

Answer 2

如果您希望所有新 div 都以相同的方式設置樣式，您可以只給它們一個 class，然后在 CSS 文件中定義這些 styles。

您可以這樣做：請注意，名稱“myclass”純粹是為了說明，我相信您可以想出一個適用於您的應用程序的有意義的名稱：

JS

function addElement (i) {
    // create a new div element
    const newDiv = document.createElement("div");

    // Add message, author, and source to content
    const content = document.createTextNode('"' + `${msg[i].remark}` + '"' + " - " + `${msg[i].author}` + " from " + `${msg[i].source}`);
    
    // add the text node to the newly created div
    newDiv.appendChild(content);

    // add CSS class
    newDiv.classList.append("myclass");

    // add the newly created element and its content into the DOM
    const current_remark = document.querySelector(".remarks");

    document.body.insertBefore(newDiv, current_remark);
    
}

CSS

.myclass {
  font-size: 16px; 
  background: #fff"; 
  color: #333;
}

Answer 3

只需使用 class 並在制作元素時包含它

JS：

newDiv.className = 'bar';

CSS：

.dynamicElement{
 padding: 20px;
    color: pink;
    background-color: springgreen;
}

您可以只使用 css 文件