在前端开发中，我们通常使用CSS来渲染网页的样式。有时候，我们需要在运行时动态地添加一些CSS规则，例如根据用户的操作动态改变页面的样式。这时我们可以使用JavaScript动态地将CSS添加到页面。
使用JavaScript创建CSS规则
我们可以使用JavaScript创建CSS规则，并将其添加到页面的样式表中。以下是一个示例：
-- -------------------- ---- ------- -- ---------- --- ----- - -------------------------------- ---------- - ----------- -- ------- --- ---- - --------- - ------ ---- --- ------------------------------------------------- -- ----------------- ---------------------------------
这个示例创建了一个新的<style>元素，并向其中添加了一个CSS规则。然后，将这个元素添加到了页面的<head>标签中。现在，所有class为example的元素都将具有红色文本颜色。</p> <h2>使用JavaScript修改样式属性</h2> <p>除了创建新的CSS规则，我们还可以使用JavaScript修改现有的样式属性。以下是一个示例：</p> <pre class="prettyprint login javascript">// 获取要修改样式的元素 var element = document.getElementById('example'); // 修改样式属性 element.style.color = 'red';</pre><p>这个示例获取了id为example的元素，并将其文本颜色设置为红色。</p> <h2>实现动态样式切换</h2> <p>使用以上技巧，我们可以实现动态样式切换的效果。例如，我们可以创建两个不同的CSS规则，然后在用户点击按钮时切换它们。以下是一个示例：</p> <pre class="prettyprint login html"><button id="toggle-button">Toggle Style</button></pre><pre class="prettyprint javascript">-- -------------------- ---- ------- -- ------------ --- ------ - --------- - ------ --- --- --- ------ - --------- - ------ ---- --- -- ------------------------ --- ----- - -------------------------------- ---------- - ----------- --------------------------------------------------- --------------------------------- -- ------------------------------- --- ------ - ----------------------------------------- -------------------------------- ---------- - -- ------- -- ---------------- --- ------- - --------------- - ------- - ---- - --------------- - ------- - ---</pre><p>这个示例创建了两个不同的CSS规则，当用户点击按钮时，会切换它们。注意，我们使用innerHTML属性来改变样式元素的内容，从而实现CSS规则的切换。</p> <blockquote> <p>来源：<a href="https://www.javascriptcn.com/post/24135">JavaScript中文网</a> ，转载请注明来源 <a href="https://www.javascriptcn.com/post/24135">https://www.javascriptcn.com/post/24135</a></p> </blockquote>