JavaScript 如何动态添加 CSS 样式到网页？

使用 JavaScript 动态添加 CSS 样式

通过 JavaScript 动态添加 CSS 规则的能力是修改 CSS 视觉外观的强大技术。动态网页。一种常见的方法是创建一个新的样式元素并将其附加到文档头。

// Your CSS as text
var styles = `
    .qwebirc-qui .ircwindow div { 
        font-family: Georgia,Cambria,"Times New Roman",Times,serif;
        margin: 26px auto 0 auto;
        max-width: 650px;
    }
    .qwebirc-qui .lines {
        font-size: 18px;
        line-height: 1.58;
        letter-spacing: -.004em;
    }
    
    .qwebirc-qui .nicklist a {
        margin: 6px;
    }
`

var styleSheet = document.createElement("style")
styleSheet.textContent = styles
document.head.appendChild(styleSheet)

此代码创建一个新的样式元素并将其文本内容设置为提供的 CSS 样式。接下来，它将样式元素附加到文档的头部，这确保立即应用样式。

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