JavaScript动态给style标签内添加样式

三巧

于 2024-08-19 14:11:37 发布

阅读量842

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq_39124701/article/details/141323562

// 创建一个新的<style>标签(使用let声明变量)
let styleElement = document.createElement("style");

// 覆盖样式(使用textContent添加样式从而避免HTML解析)
// https://developer.mozilla.org/zh-CN/docs/Web/API/Element/innerHTML
styleElement.textContent = "body { background-color: #f0f0f0; }";
// 追加样式
styleElement.textContent += ' h1 { color: blue; }';
// 清空样式
styleElement.textContent = '';

// 将<style>标签添加到<head>中
document.head.appendChild(styleElement);