js 添加style

作者：步崖发布日期:2025-03-12 浏览:385
// 示例代码：使用 JavaScript 动态添加样式

// 创建一个新的 <style> 元素
let style = document.createElement('style');

// 向 <style> 元素中添加 CSS 规则
style.innerHTML = `
  .new-style {
    color: red;
    font-size: 24px;
  }
`;

// 将 <style> 元素添加到文档的 <head> 中
document.head.appendChild(style);

// 解释说明：
// 1. 使用 `document.createElement('style')` 创建一个新的 <style> 元素。
// 2. 使用 `style.innerHTML` 向 <style> 元素中添加 CSS 规则，定义 `.new-style` 类的样式。
// 3. 使用 `document.head.appendChild(style)` 将新的 <style> 元素添加到文档的 <head> 中，使样式生效。

// 另一种方法：直接操作元素的 style 属性
let element = document.getElementById('myElement');
element.style.color = 'blue';
element.style.fontSize = '18px';

// 解释说明：
// 1. 使用 `document.getElementById('myElement')` 获取指定 ID 的元素。
// 2. 直接操作元素的 `style` 属性，设置其颜色和字体大小。
上一篇：js label
下一篇：js toggle