Mengesampingkan! Gaya penting

Judul cukup merangkumnya.

Style sheet eksternal memiliki kode berikut:

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

Saya telah mencoba menggunakan:

element.style.display = "inline";

dan

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

tapi tidak ada yang berhasil. Apakah mungkin untuk mengganti gaya! Penting menggunakan javascript.

Ini untuk ekstensi greasemonkey, jika itu membuat perbedaan.

Saya percaya satu-satunya cara untuk melakukan ini adalah dengan menambahkan gaya sebagai deklarasi CSS baru dengan akhiran '! Important'. Cara termudah untuk melakukannya adalah dengan menambahkan elemen <style> baru ke kepala dokumen:

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

Aturan yang ditambahkan dengan metode di atas akan (jika Anda menggunakan sufiks! Important) menggantikan gaya lain yang disetel sebelumnya. Jika Anda tidak menggunakan sufiks, pastikan untuk mempertimbangkan konsep seperti ' kekhususan '.

Ada beberapa baris satu sederhana yang dapat Anda gunakan untuk melakukan ini.

1) Setel atribut "gaya" pada elemen:

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

atau...

2) Ubah cssTextproperti styleobjek:

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

Keduanya akan melakukan pekerjaan itu.

===

BTW - jika Anda menginginkan alat yang berguna untuk memanipulasi !importantaturan dalam elemen, saya telah menulis plugin jQuery yang disebut "penting": http://github.com/premasagar/important

element.stylememiliki setPropertymetode yang dapat mengambil prioritas sebagai parameter ketiga:

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

Itu tidak berfungsi di IE lama tetapi seharusnya baik-baik saja di browser saat ini.

Membangun jawaban yang sangat baik dari @ Premasagar; jika Anda tidak ingin menghapus semua gaya sebaris lainnya, gunakan ini

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

_{Tidak dapat digunakan removeProperty()karena tidak akan menghapus !importantaturan di Chrome.
Tidak dapat digunakan element.style[property] = ''karena hanya menerima camelCase di FireFox.}

Metode yang lebih baik yang baru saya temukan: cobalah untuk lebih spesifik daripada CSS halaman dengan pemilih Anda. Saya baru saja melakukan ini hari ini, dan itu bekerja dengan sangat baik! Info lebih lanjut di situs W3C: http://www.w3.org/TR/CSS2/cascade.html#specificity

Jika Anda ingin memperbarui / menambahkan gaya tunggal dalam atribut gaya Elemen DOM, Anda dapat menggunakan fungsi ini:

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 didukung untuk semua browser utama .

Contoh use case:

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

Ini link ke demo

Jika semua yang Anda lakukan adalah menambahkan css ke halaman, maka saya akan menyarankan Anda menggunakan addon Stylish, dan menulis gaya pengguna daripada skrip pengguna, karena gaya pengguna lebih efisien dan sesuai.

Lihat halaman ini dengan informasi tentang cara membuat gaya pengguna

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

gunakan properti awal di 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/

Salah satu opsi untuk mengganti kelas CSS di JavaScript adalah menggunakan ID untuk elemen gaya sehingga kita dapat memperbarui kelas 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)

Daripada memasukkan gaya, jika Anda memasukkan kelas (misalnya: 'show') melalui skrip java, itu akan berhasil. Tapi di sini Anda membutuhkan css seperti di bawah ini. aturan css kelas yang ditambahkan harus di bawah aturan asli Anda.

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

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

Di sana kami memiliki kemungkinan lain untuk menghapus nilai properti dari CSS.

Seperti menggunakan metode ganti di js. Tapi Anda harus tahu persis ID dari gaya tersebut, atau Anda dapat menulis perulangan for untuk mendeteksinya dengan (hitung gaya di halaman, lalu periksa apakah ada di antara nilai 'termasuk' atau 'cocok' !important. & Anda dapat menghitung juga - berapa banyak yang memuatnya, atau cukup tulis metode penggantian [regexp: / str / gi] global)

Milik saya sangat sederhana, tetapi saya melampirkan jsBin, misalnya:

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

Pertama saya mengatur latar belakang tubuh di CSS untuk kuning !important, lalu saya mengganti dengan JS untuk darkPink.

Di bawah ini adalah potongan kode untuk mengatur parameter penting untuk atribut gaya menggunakan 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,";"));
};

Penggunaannya cukup sederhana. Cukup teruskan sebuah objek yang berisi semua atribut yang ingin Anda tetapkan sebagai penting.

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

Ada dua opsi tambahan.

1.Untuk menambahkan parameter penting ke atribut gaya yang sudah ada, berikan string kosong.

2. Untuk menambahkan param penting untuk semua atribut yang ada, jangan berikan apa pun. Ini akan mengatur semua atribut sebagai penting.

Ini dia siaran langsung. http://codepen.io/agaase/pen/nkvjr