Важливий стиль!

Назва в значній мірі підсумовує це.

Зовнішній аркуш стилів має такий код:

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

Я спробував використовувати:

element.style.display = "inline";

і

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

але не працює. Чи можливо замінити важливий стиль за допомогою javascript.

Це стосується розширення маслянки, якщо це має значення.

Я вважаю, що єдиний спосіб зробити це - додати стиль як нову декларацію 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;}')

Правила, додані вищевказаним методом, (якщо ви використовуєте важливий суфікс) замінять інші раніше встановлені стилі. Якщо ви не використовуєте суфікс, то обов'язково враховуйте такі поняття, як " специфіка ".

Існує кілька простих однокласників, які ви можете використовувати для цього.

1) Встановіть атрибут "style" на елемент:

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

або ...

2) Змініть cssTextвластивість styleоб'єкта:

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

Або зробить роботу.

===

BTW - якщо ви хочете корисний інструмент для керування !importantправилами в елементах, я написав плагін jQuery під назвою "важливо": http://github.com/premasagar/important

element.styleмає setPropertyметод, який може приймати пріоритет як третій параметр:

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

Він не працював у старих IE, але це має бути добре в поточних браузерах.

Спираючись на відмінну відповідь @ Премасагар; якщо ви не хочете видаляти всі інші стилі вбудованих даних, використовуйте це

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

Кращий метод, який я щойно виявив: спробуйте бути більш конкретним, ніж сторінка CSS зі своїми селекторами. Я просто повинен був зробити це сьогодні, і це працює як шарм! Більше інформації на сайті W3C: http://www.w3.org/TR/CSS2/cascade.html#specificity

Якщо ви хочете оновити / додати один стиль в атрибуті стилю 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");

Ось посилання на демонстрацію

Якщо все, що ви робите, це додавання css на сторінку, то я б запропонував вам скористатися Стильним аддоном та написати стиль користувача замість сценарію користувача, оскільки стиль користувача є більш ефективним та відповідним.

Дивіться цю сторінку з інформацією про те, як створити стиль користувача

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)

Замість того, щоб вводити стиль, якщо ви вводите клас (наприклад: 'show') через сценарій java, він буде працювати. Але тут вам потрібен CSS, як нижче. додане правило CSS класу повинно бути нижче вашого початкового правила.

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

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

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

Як і метод заміщення у js. Але ви повинні точно знати ідентифікатор стилю, або ви можете написати цикл для його виявлення (порахуйте стилі на сторінці, а потім перевірте, чи є якесь із цих значень "включає" чи "відповідає" !important. І ви можете порахувати також - скільки їх містить або просто просто написати глобальний метод заміни [regexp: / str / gi])

Шахта дуже проста, але я додаю jsBin, наприклад:

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

Спочатку я встановив фон тіла в CSS на жовтий !important, потім я змінив JS на darkPink.

Нижче наведено фрагмент коду для встановлення важливого параметра для атрибуту стилю за допомогою 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