Важный стиль!

Question

Название в значительной степени подводит итог.

Внешняя таблица стилей имеет следующий код:

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

Я пытался использовать:

element.style.display = "inline";

и

element.style.display = "inline !important";

но ни один не работает. Можно ли переопределить! Важный стиль, используя javascript.

Это для расширения "greasemonkey", если это имеет значение.

Answer 1

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

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

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

или ...

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

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

Либо выполнит работу.

===

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

Answer 2

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

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

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

Answer 3

Я считаю, что единственный способ сделать это - добавить стиль в качестве нового CSS-объявления с суффиксом "важный". Самый простой способ сделать это - добавить новый элемент

Answer 4

Вы можете использовать:

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

https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/setProperty

Answer 5

Опираясь на превосходный ответ @ 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(), поскольку оно не удаляет правила !important в Chrome.
Не могу использовать element.style[property] = '', потому что он принимает только camelCase в FireFox.}

Answer 6

Если вы хотите обновить / добавить отдельный стиль в атрибуте стиля DOM Element, вы можете использовать эту функцию:

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");

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

Answer 7

Лучший метод, который я только что открыл: постарайтесь быть более конкретным, чем страница CSS с вашими селекторами. Я просто должен был сделать это сегодня, и это работает как шарм! Больше информации на сайте W3C: http://www.w3.org/TR/CSS2/cascade.html#specificity

Answer 8

Вместо внедрения стиля, если вы внедрите класс (например, 'show') с помощью сценария Java, он будет работать. Но здесь вам нужно CSS, как показано ниже. добавленное правило класса CSS должно быть ниже вашего исходного правила.

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

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

Answer 9

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)

Answer 10

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>