为了搜索者的利益;如果你正在使用jQuery，你可以做以下事情:

var currentOverride = $('#customoverridestyles');

if (currentOverride) {
 currentOverride.remove();
}

$('body').append("<style id=\"customoverridestyles\">body{background-color:pink;}</style>");

显然，你可以改变内部css为任何你想要的。

有些人更喜欢纯JavaScript，但它可以工作，并且在动态编写/覆盖样式方面非常健壮。

以下是我的模块化解决方案:

var final_style = document.createElement('style');
final_style.type = 'text/css';

function addNewStyle(selector, style){
  final_style.innerHTML += selector + '{ ' + style + ' } \n';
};

function submitNewStyle(){
  document.getElementsByTagName('head')[0].appendChild(final_style);

  final_style = document.createElement('style');
  final_style.type = 'text/css';
};

function submitNewStyleWithMedia(mediaSelector){
  final_style.innerHTML = '@media(' + mediaSelector + '){\n' + final_style.innerHTML + '\n};';
    submitNewStyle();
};

基本上你在代码的任何地方都可以: addNewStyle('body'， 'color: ' + color1);，其中color1为已定义变量。

当你想要“发布”当前CSS文件时，你只需做submitNewStyle()， 之后你还可以添加更多的CSS。

如果你想添加“媒体查询”，你可以选择。 在“addingNewStyles”之后，你只需使用submitNewStyleWithMedia('min-width: 1280px');。

这对我的用例非常有用，因为我正在根据当前时间更改公共(不是我的)网站的CSS。我在使用“活动”脚本之前提交一个CSS文件，然后提交其余的文件(使站点看起来有点像它应该在通过querySelector访问元素之前)。

IE 9。现在可以加载文本文件并设置样式。innerHTML属性。所以本质上你现在可以通过ajax加载一个css文件(并获得回调)，然后像这样设置样式标签内的文本。

这适用于其他浏览器，不确定多久以前。但只要你不需要支持IE8，它就可以工作。

// RESULT: doesn't work in IE8 and below. Works in IE9 and other browsers.
$(document).ready(function() {
    // we want to load the css as a text file and append it with a style.
    $.ajax({
        url:'myCss.css',
        success: function(result) {
            var s = document.createElement('style');
            s.setAttribute('type', 'text/css');
            s.innerHTML = result;
            document.getElementsByTagName("head")[0].appendChild(s);
        },
        fail: function() {
            alert('fail');
        }
    })
});

然后你可以让它取出一个外部文件，比如mycss。css

.myClass { background:#F00; }

以下是Vishwanath的解决方案，稍微写了一些注释:

function setStyle(cssRules, aSelector, aStyle){
    for(var i = 0; i < cssRules.length; i++) {
        if(cssRules[i].selectorText && cssRules[i].selectorText.toLowerCase() == aSelector.toLowerCase()) {
            cssRules[i].style.cssText = aStyle;
            return true;
        }
    }
    return false;
}

function createCSSSelector(selector, style) {
    var doc = document;
    var allSS = doc.styleSheets;
    if(!allSS) return;

    var headElts = doc.getElementsByTagName("head");
    if(!headElts.length) return;

    var styleSheet, media, iSS = allSS.length; // scope is global in a function
    /* 1. search for media == "screen" */
    while(iSS){ --iSS;
        if(allSS[iSS].disabled) continue; /* dont take into account the disabled stylesheets */
        media = allSS[iSS].media;
        if(typeof media == "object")
            media = media.mediaText;
        if(media == "" || media=='all' || media.indexOf("screen") != -1){
            styleSheet = allSS[iSS];
            iSS = -1;   // indication that media=="screen" was found (if not, then iSS==0)
            break;
        }
    }

    /* 2. if not found, create one */
    if(iSS != -1) {
        var styleSheetElement = doc.createElement("style");
        styleSheetElement.type = "text/css";
        headElts[0].appendChild(styleSheetElement);
        styleSheet = doc.styleSheets[allSS.length]; /* take the new stylesheet to add the selector and the style */
    }

    /* 3. add the selector and style */
    switch (typeof styleSheet.media) {
    case "string":
        if(!setStyle(styleSheet.rules, selector, style));
            styleSheet.addRule(selector, style);
        break;
    case "object":
        if(!setStyle(styleSheet.cssRules, selector, style));
            styleSheet.insertRule(selector + "{" + style + "}", styleSheet.cssRules.length);
        break;
    }

为了搜索者的利益;如果你正在使用jQuery，你可以做以下事情:

var currentOverride = $('#customoverridestyles');

if (currentOverride) {
 currentOverride.remove();
}

$('body').append("<style id=\"customoverridestyles\">body{background-color:pink;}</style>");

显然，你可以改变内部css为任何你想要的。

有些人更喜欢纯JavaScript，但它可以工作，并且在动态编写/覆盖样式方面非常健壮。

https://jsfiddle.net/xk6Ut/256/

在JavaScript中动态创建和更新CSS类的一个选项:

使用样式元素创建CSS节 使用样式元素的ID，以便我们可以更新CSS 类

…

function writeStyles(styleName, cssText) {
    var styleElement = document.getElementById(styleName);
    if (styleElement) 
             document.getElementsByTagName('head')[0].removeChild(
        styleElement);
    styleElement = document.createElement('style');
    styleElement.type = 'text/css';
    styleElement.id = styleName;
    styleElement.innerHTML = cssText;
    document.getElementsByTagName('head')[0].appendChild(styleElement);
}

...

    var cssText = '.testDIV{ height:' + height + 'px !important; }';
    writeStyles('styles_js', cssText)