如何使用JavaScript动态添加和修改CSS样式？

使用 Javascript 合并 CSS

CSS 样式表对于自定义网页外观至关重要。但是，如果您想根据特定条件或用户交互动态修改 CSS，该怎么办？这就是 Javascript 发挥作用的地方。

通过 Javascript 添加 CSS 规则

通过 Javascript 添加 CSS 规则的主要方法是创建一个新的样式节点并将其添加到文档。这涉及以下步骤：

1. 创建样式节点：创建 HTML
2. 添加样式节点： 将创建的样式节点附加到 中。使用 document.head.appendChild(styleSheet).

示例：

// CSS rules as text
var styles = `
    .my-custom-class {
        color: red;
        font-weight: bold;
    }
`;

// Create a style node
var styleSheet = document.createElement("style");
styleSheet.textContent = styles;

// Add the style node to the head
document.head.appendChild(styleSheet);

通过这种方法，您可以动态修改 CSS 样式并响应用户操作或应用程序逻辑更改。

以上是如何使用JavaScript动态添加和修改CSS样式？的详细内容。更多信息请关注PHP中文网其他相关文章！