如果你想在DOM元素样式属性中更新/添加单个样式，你可以使用这个函数:

function setCssTextStyle(el, style, value) {
  var result = el.style.cssText.match(new RegExp("(?:[;\\s]|^)(" +
      style.replace("-", "\\-") + "\\s*:(.*?)(;|$))")),
    idx;
  if (result) {
    idx = result.index + result[0].indexOf(result[1]);
    el.style.cssText = el.style.cssText.substring(0, idx) +
      style + ": " + value + ";" +
      el.style.cssText.substring(idx + result[1].length);
  } else {
    el.style.cssText += " " + style + ": " + value + ";";
  }
}

风格。所有主流浏览器都支持cssText。

用例示例:

var elem = document.getElementById("elementId");
setCssTextStyle(elem, "margin-top", "10px !important");

这里是演示的链接

如果您所做的只是向页面添加css，那么我建议您使用Stylish插件，并编写用户样式而不是用户脚本，因为用户样式更有效和合适。

有关如何创建用户样式的信息，请参阅此页

https://developer.mozilla.org/en-US/docs/Web/CSS/initial

在css3中使用initial属性

 <p style="color:red!important"> 
    this text is red 
       <em style="color:initial"> 
          this text is in the initial color (e.g. black)
       </em>
    this is red again
 </p>

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

在JavaScript中覆盖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)

我相信做到这一点的唯一方法是添加样式作为一个新的CSS声明与'!重要”后缀。最简单的方法是在文档头添加一个新的<style>元素:

function addNewStyle(newStyle) {
    var styleElement = document.getElementById('styles_js');
    if (!styleElement) {
        styleElement = document.createElement('style');
        styleElement.type = 'text/css';
        styleElement.id = 'styles_js';
        document.getElementsByTagName('head')[0].appendChild(styleElement);
    }
    styleElement.appendChild(document.createTextNode(newStyle));
}

addNewStyle('td.EvenRow a {display:inline !important;}')

使用上述方法添加的规则(如果使用!important后缀)将覆盖之前设置的其他样式。如果你不使用后缀，那么一定要考虑到“特异性”这样的概念。

基于@Premasagar的精彩回答;如果你不想删除所有其他的内联样式，可以使用这个

//accepts the hyphenated versions (i.e. not 'cssFloat')
addStyle(element, property, value, important) {
    //remove previously defined property
    if (element.style.setProperty)
        element.style.setProperty(property, '');
    else
        element.style.setAttribute(property, '');

    //insert the new style with all the old rules
    element.setAttribute('style', element.style.cssText +
        property + ':' + value + ((important) ? ' !important' : '') + ';');
}

不能使用removeProperty()，因为它不会删除Chrome中的重要规则。 不能使用元素。style[property] = "因为它在FireFox中只接受camelCase。