在一行中，将一个或多个新的级联规则附加到文档中。

这个例子附加了一个游标:指向每个按钮、输入、选择的指针。

document.body.appendChild(Object.assign(document.createElement("style"), {textContent: "select, button, input {cursor:pointer}"}))

有一个轻量级的jQuery插件可以生成CSS声明:jQuery- injectcss

事实上，它使用JSS (JSON描述的CSS)，但是为了生成动态CSS样式表，它很容易处理。

$.injectCSS({
    "#test": {
        height: 123
    }
});

function createCSSClass(selector, style, hoverstyle) 
{
    if (!document.styleSheets) 
    {
        return;
    }

    if (document.getElementsByTagName("head").length == 0) 
    {

        return;
    }
    var stylesheet;
    var mediaType;
    if (document.styleSheets.length > 0) 
    {
        for (i = 0; i < document.styleSheets.length; i++) 
        {
            if (document.styleSheets[i].disabled) 
            {
                continue;
            }
            var media = document.styleSheets[i].media;
            mediaType = typeof media;

            if (mediaType == "string") 
            {
                if (media == "" || (media.indexOf("screen") != -1)) 
                {
                    styleSheet = document.styleSheets[i];
                }
            } 
            else if (mediaType == "object") 
            {
                if (media.mediaText == "" || (media.mediaText.indexOf("screen") != -1)) 
                {
                    styleSheet = document.styleSheets[i];
                }
            }

            if (typeof styleSheet != "undefined") 
            {
                break;
            }
        }
    }

    if (typeof styleSheet == "undefined") {
        var styleSheetElement = document.createElement("style");
        styleSheetElement.type = "text/css";
        document.getElementsByTagName("head")[0].appendChild(styleSheetElement);
        for (i = 0; i < document.styleSheets.length; i++) {
            if (document.styleSheets[i].disabled) {
                continue;
            }
            styleSheet = document.styleSheets[i];
        }

        var media = styleSheet.media;
        mediaType = typeof media;
    }

    if (mediaType == "string") {
        for (i = 0; i < styleSheet.rules.length; i++) 
        {
            if (styleSheet.rules[i].selectorText.toLowerCase() == selector.toLowerCase()) 
            {
                styleSheet.rules[i].style.cssText = style;
                return;
            }
        }

        styleSheet.addRule(selector, style);
    }
    else if (mediaType == "object") 
    {
        for (i = 0; i < styleSheet.cssRules.length; i++) 
        {
            if (styleSheet.cssRules[i].selectorText.toLowerCase() == selector.toLowerCase()) 
            {
                styleSheet.cssRules[i].style.cssText = style;
                return;
            }
        }

        if (hoverstyle != null) 
        {
            styleSheet.insertRule(selector + "{" + style + "}", 0);
            styleSheet.insertRule(selector + ":hover{" + hoverstyle + "}", 1);
        }
        else 
        {
            styleSheet.insertRule(selector + "{" + style + "}", 0);
        }
    }
}





createCSSClass(".modalPopup  .header",
                                 " background-color: " + lightest + ";" +
                                  "height: 10%;" +
                                  "color: White;" +
                                  "line-height: 30px;" +
                                  "text-align: center;" +
                                  " width: 100%;" +
                                  "font-weight: bold; ", null);

这里有一个选项:

var style = document.createElement（'style'）; style.type = 'text/css'; style.innerHTML = '.cssClass { color： #f00; }'; document.getElementsByTagName（'head'）[0].appendChild（style）; document.getElementById（'someElementId'）.className = 'cssClass'; <div id=“someElementId”>test text</div>

这是我在Angular中行之有效的方法: 在HTML中，我有按钮与编程创建的CSS与特定的ID:

    <button [id]="'hoverbutton1'+item.key" [ngClass]="getHoverButtonClass()">
        <mat-icon class="icon">open_in_new</mat-icon>
    </button>

在typescript中，我创建了CSS，并将其分配给给定ID的特定元素:

addClasses(){
  var style1 = document.createElement('style');
  style1.innerHTML = '.hoverbutton'+this.item.key+' { display: none; }';
  document.getElementsByTagName('head')[0].appendChild(style1);
}

getHoverButtonClass() {
  return "hoverbutton"+this.item.key
}

通过这种方式，我可以创建尽可能多的CSS类，并将它们单独分配给元素。：）

使用谷歌闭包:

你可以使用ccsom模块:

goog.require('goog.cssom');
var css_node = goog.cssom.addCssText('.cssClass { color: #F00; }');

当将css节点放入文档头时，javascript代码试图跨浏览器。