如何在 JavaScript 中將 CSS 樣式表作為字串注入？

如何在JavaScript 中將CSS 樣式表作為字串注入

簡介

將自訂CSS 合併到Web應用程式中可以增強使用者體驗。本文解決了開發人員在嘗試使用 JavaScript 將完整的 CSS 樣式表作為字串注入時面臨的常見問題。我們探索的解決方案使您能夠建立新樣式表並動態修改現有樣式表。

建立新樣式表

最簡單的方法包括建立一個樣式。元素，設定其 textContent 屬性，並將其附加到頁面的

<code class="javascript">const style = document.createElement('style');
style.textContent = 'body { color: red; }';
document.head.append(style);</code>

此方法可讓您透過多次呼叫 addStyle() 來新增多個 CSS 區塊。

取代現有樣式表

要取代現有CSS，請稍微修改程式碼以設定style.textContent，而不是附加：

<code class="javascript">const addStyle = () => {
  const style = document.createElement('style');
  document.head.append(style);
  return (styleString) => { style.textContent = styleString; };
};</code>

注意事項

• IE 相容性： IE9 及更低版本的樣式表數量限制為32 個。避免在這些瀏覽器中過度使用。
• XSS 安全性：使用 textContent 而不是 innerHTML 來防止 XSS 攻擊。

結論

這些技術提供了將CSS注入Web應用程式的靈活方法，使開發人員能夠增強視覺自訂並動態改善使用者體驗。

以上是如何在 JavaScript 中將 CSS 樣式表作為字串注入？的詳細內容。更多資訊請關注PHP中文網其他相關文章！