Nadrzędny! Ważny styl

Tytuł w dużym stopniu to podsumowuje.

Zewnętrzny arkusz stylów ma następujący kod:

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

Próbowałem użyć:

element.style.display = "inline";

i

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

ale nie działa. Czy można zastąpić! Ważny styl za pomocą javascript.

To jest dla rozszerzenia greasemonkey, jeśli to robi różnicę.

Uważam, że jedynym sposobem na to jest dodanie stylu jako nowej deklaracji CSS z sufiksem „! Important”. Najłatwiej to zrobić, dodając nowy element <style> do nagłówka dokumentu:

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;}')

Reguły dodane powyższą metodą (jeśli użyjesz sufiksu! Important) zastąpią inne poprzednio ustawione style. Jeśli nie używasz przyrostka, pamiętaj, aby wziąć pod uwagę pojęcia takie jak „ specyficzność ”.

Można do tego użyć kilku prostych, jednoliniowych linków.

1) Ustaw atrybut „style” dla elementu:

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

lub...

2) Zmodyfikuj cssTextwłaściwość styleobiektu:

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

Albo zrobi robotę.

===

BTW - jeśli potrzebujesz użytecznego narzędzia do manipulowania !importantregułami w elementach, napisałem wtyczkę jQuery o nazwie „ważne”: http://github.com/premasagar/important

element.stylema setPropertymetodę, która może przyjąć priorytet jako trzeci parametr:

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

To nie działa w starych IES ale powinno być dobrze w obecnych przeglądarek.

Opierając się na doskonałej odpowiedzi @ Premasagar; jeśli nie chcesz usuwać wszystkich innych stylów wbudowanych, użyj tego

//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' : '') + ';');
}

_{Nie można użyć, removeProperty()ponieważ nie spowoduje to usunięcia !importantreguł w Chrome.
Nie można użyć, element.style[property] = ''ponieważ akceptuje tylko camelCase w FireFox.}

Lepsza metoda, którą właśnie odkryłem: spróbuj być bardziej szczegółowym niż CSS strony z twoimi selektorami. Po prostu musiałem to zrobić dzisiaj i działa jak urok! Więcej informacji na stronie W3C: http://www.w3.org/TR/CSS2/cascade.html#specificity

Jeśli chcesz zaktualizować / dodać pojedynczy styl w atrybucie stylu elementu DOM, możesz użyć tej funkcji:

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 jest obsługiwany we wszystkich głównych przeglądarkach .

Przykład użycia:

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

Oto link do wersji demonstracyjnej

Jeśli wszystko, co robisz, to dodawanie css do strony, sugerowałbym użycie stylowego dodatku i napisanie stylu użytkownika zamiast skryptu użytkownika, ponieważ styl użytkownika jest bardziej wydajny i odpowiedni.

Na tej stronie znajdziesz informacje o tworzeniu stylu użytkownika

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

użyj właściwości początkowej w 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/

Jedną z opcji nadpisania klasy CSS w JavaScript jest użycie identyfikatora elementu style, abyśmy mogli zaktualizować klasę 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)

Zamiast wstrzykiwać styl, jeśli wstrzykniesz klasę (np. „Show”) przez skrypt java, zadziała. Ale tutaj potrzebujesz css jak poniżej. dodana reguła CSS klasy powinna znajdować się poniżej pierwotnej reguły.

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

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

Mamy kolejną możliwość usunięcia wartości właściwości z CSS.

Podobnie jak przy użyciu metody replace w js. Ale musisz dokładnie znać identyfikator stylu lub możesz napisać pętlę for, aby to wykryć, (policz style na stronie, a następnie sprawdź, czy któryś z tych elementów zawiera lub pasuje do !importantwartości). także - ile ich zawiera, lub po prostu napisz globalną metodę zastępującą [regexp: / str / gi])

Mój jest bardzo prosty, ale dołączam jsBin, na przykład:

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

Najpierw ustawiłem tło ciała w CSS na żółto !important, a następnie nadpisałem przez JS na darkPink.

Poniżej znajduje się fragment kodu służący do ustawiania ważnego parametru atrybutu stylu za pomocą 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,";"));
};

Użycie jest całkiem proste - po prostu przekaż obiekt zawierający wszystkie atrybuty, które chcesz ustawić jako ważne.

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

Istnieją dwie dodatkowe opcje.

Aby po prostu dodać ważny parametr do już istniejącego atrybutu stylu, przekaż pusty ciąg.

2. Aby dodać ważny parametr do wszystkich obecnych atrybutów, nie przekazuj niczego. Ustawi wszystkie atrybuty jako ważne.

Oto jest na żywo w akcji. http://codepen.io/agaase/pen/nkvjr