如何使用Javascript添加CSS？

Question

如何使用Javascript添加CSS？如何添加CSS规则(例如strong { color: red })使用Javascript？

Answer 1

简单和直接的方法是创建和添加一个新的style节点到文档。

// Your CSS as textvar 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.type = "text/css"styleSheet.innerText = styles
document.head.appendChild(styleSheet)

Answer 2

这里有一个略为更新的版本克里斯·赫林解，考虑到您可以使用innerHTML也没有创建一个新的文本节点：

function insertCss( code ) {
    var style = document.createElement('style');
    style.type = 'text/css';

    if (style.styleSheet) {
        // IE
        style.styleSheet.cssText = code;
    } else {
        // Other browsers
        style.innerHTML = code;
    }

    document.getElementsByTagName("head")[0].appendChild( style );}