JavaScript动态添加style节点的方法

2023年6月10日下午1:14 • JavaScript

动态添加style节点是JavaScript编程中经常会用到的技巧，它可以帮助我们在运行时修改网页的布局样式，从而实现动态渲染的效果。以下是完整攻略：

1. 创建style节点

要添加样式到网页中，首先需要创建一个style节点:

const style = document.createElement('style');

这行代码创建了一个全新的style节点，然后我们可以将这个节点添加到文档中。

2. 添加样式信息

接下来，我们需要给style节点添加具体的样式信息。有两种方式可以实现这个功能。

方法一：innerHTML属性

我们可以使用innerHTML属性，将样式信息作为HTML字符串写入节点中。

style.innerHTML = `
  h1 {
    color: red;
  }

  p {
    font-size: 16px;
    line-height: 1.5;
  }
`;

这行代码将添加两条样式规则，分别将h1元素的字体颜色设为红色，将p元素的字号设为16像素，行高设为1.5倍行间距。

方法二：appendChild方法

我们也可以使用appendChild方法，将一个已经创建好的CSS样式节点添加到style节点的子节点中。

const cssText = `h1 {
  color: red;
}

p {
  font-size: 16px;
  line-height: 1.5;
}`;
const cssNode = document.createTextNode(cssText);
style.appendChild(cssNode);

这个示例代码将CSS样式文本信息添加到一个文本节点中，然后将这个文本节点添加到style节点中。

3. 添加到文档中

最后一步，我们需要将style节点添加到文档中，让它生效。

document.head.appendChild(style);

这行代码将style节点添加到head元素中，让其中的样式生效。

示例说明

下面，我们来看两个具体的动态添加CSS节点的示例。

示例一：添加一个随机颜色的背景

首先，我们创建一个button元素，点击它会随机改变网页背景颜色。这个示例中，我们使用innerHTML属性创建了一个全新的HTML字符串，然后将其添加到style节点中。注意，在字符串中，我们使用backquote符号，允许我们在字符串中插入普通的JavaScript代码，以生成随机的RGB颜色。

<!DOCTYPE html>
<html>
<head>
  <title>添加动态CSS样式节点示例一</title>
</head>
<body>
  <button onClick="changeBackground()">改变背景颜色</button>
  <script>
    function changeBackground() {
      const style = document.createElement('style');
      style.innerHTML = `
        body {
          background-color: rgb(${Math.floor(Math.random()*255)},${Math.floor(Math.random()*255)},${Math.floor(Math.random()*255)});
        }
      `;
      document.head.appendChild(style);
    }
  </script>
</body>
</html>

示例二：添加一个缩放动画

这个示例中，我们使用appendChild方法，将一个已经创建好的animation节点添加到style节点的子节点中。该动画将会在hover事件中触发，实现一个文章标题的缩放动画。

<!DOCTYPE html>
<html>
<head>
  <title>添加动态CSS样式节点示例二</title>
  <style>
    .title {
      font-size: 24px;
      transition: transform 0.2s ease-in-out;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <h1 class="title" onMouseOver="animateTitle()">大标题</h1>
  <script>
    function animateTitle() {
      const style = document.createElement('style');
      const cssText = `
        @keyframes scale-up {
          from {
            transform: scale(1);
          }
          to {
            transform: scale(1.2);
          }
        }
        .title:hover {
          animation-name: scale-up;
        }
      `;
      const cssNode = document.createTextNode(cssText);
      style.appendChild(cssNode);
      document.head.appendChild(style);
    }
  </script>
</body>
</html>

以上就是JavaScript动态添加style节点的方法完整攻略，希望对您有所帮助！

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JavaScript动态添加style节点的方法 - Python技术站