Önem veren! Önemli stil

Başlık hemen hemen özetliyor.

Harici stil sayfası aşağıdaki koda sahiptir:

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

Kullanmayı denedim:

element.style.display = "inline";

ve

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

ama ikisi de çalışmıyor. JavaScript kullanarak! Önemli bir stili geçersiz kılmak mümkün mü?

Bu, bir fark yaratıyorsa, greasemonkey uzantısı içindir.

Bunu yapmanın tek yolunun, stili '! Önemli' sonekiyle yeni bir CSS bildirimi olarak eklemeye inanıyorum. Bunu yapmanın en kolay yolu, belgenin başına yeni bir <style> öğesi eklemektir:

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

Yukarıdaki yöntemle eklenen kurallar (! Önemli son ekini kullanırsanız) önceden ayarlanmış diğer stilleri geçersiz kılar. Soneki kullanmıyorsanız, ' özgüllük ' gibi kavramları hesaba kattığınızdan emin olun .

Bunu yapmak için kullanabileceğiniz birkaç basit tek gömlek var.

1) Öğede bir "stil" özelliği ayarlayın :

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

veya...

2) Nesnenin cssTextözelliğini değiştirin style:

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

Ya işi yapacak.

===

BTW - !importantöğelerdeki kuralları işlemek için yararlı bir araç istiyorsanız , "önemli" adında bir jQuery eklentisi yazdım: http://github.com/premasagar/important

element.stylesetPropertyönceliği üçüncü parametre olarak alabilen bir yönteme sahiptir :

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

O eski IE'lerin işe yaramadı ama mevcut tarayıcılarla sorun olmaz.

@ Premasagar'ın mükemmel cevabına dayanarak; diğer tüm satır içi stilleri kaldırmak istemiyorsanız bunu kullanın

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

_{Chrome'daki kuralları removeProperty()kaldırmayacağı için kullanılamıyor !important. FireFox'ta yalnızca camelCase'i kabul ettiği için
kullanılamaz element.style[property] = ''.}

Yeni keşfettiğim daha iyi yöntem: Seçicilerinizle sayfa CSS'sinden daha spesifik olmaya çalışın. Bunu bugün yapmak zorundaydım ve bu harika çalışıyor! W3C sitesinde daha fazla bilgi: http://www.w3.org/TR/CSS2/cascade.html#specificity

DOM Öğesi stil özniteliğinde tek stili güncellemek / eklemek istiyorsanız bu işlevi kullanabilirsiniz:

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 tüm büyük tarayıcılar için desteklenir .

Kullanım örneği örneği:

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

İşte demo bağlantısı

Yaptığınız tek şey sayfaya css eklemekse, o zaman Şık eklentiyi kullanmanızı ve bir kullanıcı komut dosyası yerine bir kullanıcı stili yazmanızı öneririm, çünkü bir kullanıcı stili daha verimli ve uygundur.

Kullanıcı stilinin nasıl oluşturulacağına ilişkin bilgiler içeren bu sayfaya bakın

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

css3'te ilk özelliği kullan

 <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'te CSS sınıfını geçersiz kılmak için bir seçenek, CSS sınıfını güncelleyebilmemiz için stil öğesi için bir kimlik kullanmaktır.

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)

Stil enjekte etmek yerine, java betiği aracılığıyla bir sınıfa (örneğin: 'göster') enjekte ederseniz, işe yarayacaktır. Ama burada aşağıdaki gibi css'e ihtiyacınız var. eklenen sınıf css kuralı, orijinal kuralınızın altında olmalıdır.

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

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

CSS'den bir özellik değerini kaldırmak için başka bir olasılığımız var.

Js'de değiştirme yöntemini kullanmak gibi. Ancak stilin kimliğini tam olarak bilmeniz gerekir veya bunu tespit etmek için bir for döngüsü yazabilirsiniz (sayfadaki stilleri sayın, ardından bunlardan herhangi birinin bir !importantdeğer 'içerdiğini' veya 'eşleşip' eşleşmediğini kontrol edin . Ve sayabilirsiniz. ayrıca - bunların ne kadarını içerir veya sadece genel bir [regexp: / str / gi] değiştirme yöntemi yazın)

Benimki çok basit, ancak bir jsBin ekliyorum, örneğin:

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

Önce CSS'de gövde arka planını sarı !importantiçin ayarladım, sonra JS tarafından darkPink için geçersiz kıldım.

Aşağıda, jquery kullanarak style özniteliği için önemli parametreyi ayarlamak için bir kod parçası bulunmaktadır.

$.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,";"));
};

Kullanımı oldukça basittir, önemli olarak ayarlamak istediğiniz tüm nitelikleri içeren bir nesneyi iletmeniz yeterlidir.

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

İki ek seçenek vardır.

1. Zaten mevcut stil özniteliğine önemli bir parametre eklemek için boş dizeyi geçirin.

2. Mevcut tüm niteliklere önemli bir parametre eklemek için hiçbir şeyi geçmeyin. Tüm öznitelikleri önemli olarak ayarlayacaktır.

İşte hareket halinde. http://codepen.io/agaase/pen/nkvjr