如何使用 JavaScript 添加多種 CSS 樣式
在我之前的文章中，我們研究了使用 vanilla JavaScript 為元素設置 CSS 樣式的不同方法。在本文中，您將了解另一件有趣的事情：使用 JavaScript 一次向一個元素添加多個 CSS 樣式。
添加多個內聯樣式
DOM 樣式屬性是在 JavaScript 中設置和獲取元素 CSS 樣式的最簡單方法。
通常，當您想為一個元素添加多個 CSS 屬性時，您必須單獨設置它們 如下圖：
const btn = document.querySelector('.btn');
// set inline CSS styles
btn.style.width = '150px';
btn.style.height = '40px';
btn.style.color = 'blue';
但是，這種方法不是 非常靈活。如果您決定將來進行任何修改，則必須在多個位置更新代碼。
解決此問題的一種方法是使用 cssText style 提供的屬性 屬性如下圖：
btn.style.cssText = 'width: 150px; height: 40px; color: blue';
上面的示例代碼應該可以完美運行。然而，唯一的缺點是它會覆蓋應用於元素的所有其他內聯樣式。
另一種立即應用多種 CSS 樣式的方法是使用 Object.assign() 功能：
const btn = document.querySelector('.btn');
// create styles object
const styles = {
width: '150px',
height: '40px',
color: 'white',
backgroundColor: 'black'
};
// apply styles to the button
Object.assign(btn.style, styles);
上面的代碼更具可讀性和可維護性。還有 Object.assign() 不會覆蓋所有現有的內聯樣式。相反，它只會更新那些與 styles 中的鍵匹配的屬性 對象。
添加多個全局樣式
我已經在上一篇文章中討論了三種不同的方法來添加多個全局樣式； <style> 元素，CSSOM 的 insertRule() , 和可構造的樣式表。
簡單的方法是創建一個新的 <style> 元素，使用 innerHTML 添加你的 CSS 屬性 ，並將其附加到 DOM：
// create style element
const style = document.createElement('style');
// add CSS styles
style.innerHTML = `
.btn {
color: white;
background-color: black;
width: 150px;
height: 40px;
}
`;
// append the style to the DOM in <head> section
document.head.appendChild(style);
或者，您也可以在 CSS 文件中將所有 CSS 樣式聲明為一個類，如下所示：
.btn {
color: white;
background-color: black;
width: 150px;
height: 40px;
}
然後，只需使用 JavaScript 將類添加到元素：
const btn = document.querySelector('.btn');
// add CSS class
btn.classList.add('btn');
查看本指南以了解有關使用 vanilla JavaScript 設置 CSS 樣式的更多信息。
這些教程的目的不是阻止 CSS 類的使用。相反，它只是學習如何 使用 JavaScript 操作 CSS 樣式。您應該盡可能使用 CSS 類。但是，在您無權訪問 CSS 文件的項目中了解這些技巧是很好的。
