Превалирующий! Важный стиль

Я считаю, что единственный способ сделать это - добавить стиль в качестве нового объявления CSS с суффиксом '! Important'. Самый простой способ сделать это - добавить новый элемент <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) переопределят другие ранее установленные стили. Если вы не используете суффикс, обязательно примите во внимание такие понятия, как «специфичность».

element.style имеет метод setProperty, который может принимать приоритет в качестве третьего параметра:

element.style.setProperty("display", "inline", "important")

Это не работал в старых IE, но это должно быть нормально в текущих браузерах.

Для этого вы можете использовать несколько простых однострочников.

1) Установите "стиль" атрибут для элемента:

element.setAttribute('style', 'display:inline !important');

или же...

2) Измените свойство cssText объекта style:

element.style.cssText = 'display:inline !important';

Любой из них сделает свою работу.

===

Кстати - если вам нужен полезный инструмент для управления правилами !important в элементах, я написал плагин jQuery под названием «important»: http://github.com/premasagar/important

Если все, что вы делаете, это добавляете CSS на страницу, я бы посоветовал вам использовать надстройку Stylish и написать пользовательский стиль вместо пользовательского скрипта, потому что пользовательский стиль более эффективен и уместен.

См. эта страница с информацией о том, как создать пользовательский стиль

Ниже приведен фрагмент кода для установки важного параметра для атрибута стиля с помощью jquery.

$.fn.setFixedStyle = function(styles){
    var s = $(this).attr("style");
    s = "{"+s.replace(/;/g,",").replace(/'|"/g,"");
    s = s.substring(0,s.length-1)+"}";
    s = s.replace(/,/g,"\",\"").replace(/{/g,"{\"").replace(/}/g,"\"}").replace(/:/g,"\":\"");
    var stOb = JSON.parse(s),st;
    if (!styles){
     $.each(stOb,function(k,v){
      stOb[k] + = " !important";
     });
    }
    else{
     $.each(styles,function(k,v){
      if (v.length>0){
        stOb[k] = v+" !important";
      }else{
        stOb[k] += " !important";  
      }
     });
    }
    var ns = JSON.stringify(stOb);
    $(this).attr("style",ns.replace(/"|{|}/g,"").replace(/,/g,";"));
};

Использование довольно простое: просто передайте объект, содержащий все атрибуты, которые вы хотите установить как важные.

$("#i1").setFixedStyle({"width":"50px","height":""});

Есть два дополнительных варианта.

1.Чтобы просто добавить важный параметр к уже существующему атрибуту стиля, передайте пустую строку.

2. Чтобы добавить важный параметр для всех присутствующих атрибутов, ничего не передавайте. Он установит все атрибуты как важные.

Вот оно в действии. http://codepen.io/agaase/pen/nkvjr

Основываясь на отличном ответе @ 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' : '') + ';');
}

_{Can't use removeProperty() because it wont remove !important rules in Chrome.
Can't use element.style[property] = '' because it only accepts camelCase in FireFox.}

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

использовать начальное свойство в css3

 <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/

Один из вариантов переопределения класса CSS в JavaScript - использование идентификатора для элемента стиля, чтобы мы могли обновить класс 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)

Если вы хотите обновить / добавить один стиль в атрибут стиля элемента 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 + ";";
  }
}

style.cssText - поддерживается для всех основных браузеров.

Пример использования:

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

Вот ссылка на демо

Вместо того, чтобы вводить стиль, если вы вводите класс (например, 'show') через java-скрипт, он будет работать. Но здесь вам понадобится css, как показано ниже. добавленное правило CSS класса должно быть ниже исходного правила.

td.EvenRow a{
  display: none !important;
}

td.EvenRow a.show{
  display: block !important;
}

Там у нас есть еще одна возможность удалить значение свойства из CSS.

Как при использовании метода replace в js. Но вы должны точно знать идентификатор стиля, или вы можете написать цикл for для его определения с помощью (подсчитайте стили на странице, затем проверьте, включает ли какой-либо из них или соответствует ли значение !important. И вы можете посчитайте также - сколько их содержит, или просто напишите глобальный метод замены [regexp: / str / gi])

Мой очень простой, но я прикрепляю jsBin, например:

https://jsbin.com/geqodeg/edit?html,css,js,output

Сначала я установил фон тела в CSS для желтого !important, затем переопределил JS для darkPink.