一、动态创建样式
动态创建样式是通过 JavaScript 的 DOM 操作来实现的。以下是创建样式的基本步骤：
1.创建 style 元素。
2.为 style 元素设置 type 属性，并将样式规则写入其中。
3.将 style 元素添加到文档中。
代码示例：
// 创建 style 元素 var style = document.createElement('style'); // 设置 style 元素的 type 属性 style.type = 'text/css'; // 添加样式规则 style.innerHTML = '.my-class { color: red; }'; // 将 style 元素添加到文档中 document.head.appendChild(style);
二、动态修改样式
与动态创建样式不同，动态修改样式需要先获取要修改的样式元素，然后再进行修改。以下是修改样式的基本步骤：
1.获取要修改的 style 元素。
2.修改 style 元素的 innerHTML 属性。
代码示例：
// 获取要修改的 style 元素 var style = document.getElementById('my-style'); // 修改 style 元素的 innerHTML 属性 style.innerHTML = '.my-class { color: blue; }';
三、动态移除样式
在某些情况下，我们需要从 DOM 中移除已经存在的样式元素。以下是移除样式的基本步骤：
1.获取要删除的 style 元素。
2.将 style 元素从其父节点中移除。
代码示例：
// 获取要删除的 style 元素 var style = document.getElementById('my-style'); // 将 style 元素从其父节点中移除 style.parentNode.removeChild(style);
总结
以上就是使用 DOM 操作实现动态样式的基本方法。动态样式可以给前端开发带来很多便利，比如响应式设计、主题切换等。但是，在使用动态样式时也需要注意一些细节问题，如避免样式冲突、保证样式优化等。只有熟练掌握动态样式的创建、修改和移除技巧，才能够更加灵活地应对各种场景的需求。
