รูปแบบสำคัญ

ชื่อเรื่องค่อนข้างสรุปได้

สไตล์ชีตภายนอกมีรหัสต่อไปนี้:

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

ฉันได้ลองใช้:

element.style.display = "inline";

และ

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

แต่ไม่ได้ผล เป็นไปได้ไหมที่จะลบล้างรูปแบบที่สำคัญโดยใช้จาวาสคริปต์

นี่คือส่วนขยาย greasemonkey หากสร้างความแตกต่าง

ฉันเชื่อว่าวิธีเดียวที่จะทำได้เพื่อเพิ่มสไตล์เป็นการประกาศ CSS ใหม่ด้วยคำต่อท้าย "! important" วิธีที่ง่ายที่สุดคือต่อท้ายองค์ประกอบ <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;}')

กฎที่เพิ่มเข้ามาด้วยวิธีการข้างต้นจะ (ถ้าคุณใช้คำต่อท้าย! 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")

มันไม่ได้ทำงานใน IEs เก่าแต่มันควรจะปรับในเบราว์เซอร์ในปัจจุบัน

สร้างคำตอบที่ยอดเยี่ยมของ @ 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}

วิธีที่ดีกว่าที่ฉันเพิ่งค้นพบ: พยายามเจาะจงมากกว่า CSS ของหน้าด้วยตัวเลือกของคุณ ฉันเพิ่งต้องทำวันนี้และมันก็เป็นเสน่ห์! ข้อมูลเพิ่มเติมเกี่ยวกับเว็บไซต์ W3C: http://www.w3.org/TR/CSS2/cascade.html#specificity

หากคุณต้องการอัปเดต / เพิ่มสไตล์เดี่ยวในแอตทริบิวต์สไตล์องค์ประกอบ DOM คุณสามารถใช้ฟังก์ชันนี้:

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 ลงในเพจฉันขอแนะนำให้คุณใช้ Stylish addon และเขียนสไตล์ผู้ใช้แทนสคริปต์ผู้ใช้เนื่องจากสไตล์ผู้ใช้มีประสิทธิภาพและเหมาะสมกว่า

ดูหน้านี้พร้อมข้อมูลเกี่ยวกับวิธีสร้างสไตล์ผู้ใช้

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 คือการใช้ ID สำหรับอิลิเมนต์สไตล์เพื่อให้เราอัปเดตคลาส 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 แต่คุณต้องรู้ ID ของสไตล์อย่างแน่นอนหรือคุณสามารถเขียน for loop เพื่อตรวจจับสิ่งนั้นโดย (นับรูปแบบบนหน้าจากนั้นตรวจสอบว่ามีค่า "รวม" หรือ "จับคู่" หรือ!importantไม่และคุณสามารถนับได้ ด้วย - มีจำนวนเท่าใดหรือเพียงแค่เขียน global [regexp: / str / gi] แทนที่ method)

ของฉันง่ายมาก แต่ฉันแนบ jsBin ตัวอย่างเช่น:

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

ก่อนอื่นฉันตั้งค่าพื้นหลังของร่างกายใน CSS เป็นสีเหลือง!importantจากนั้นฉันก็แทนที่ด้วย JS สำหรับ darkPink

ด้านล่างนี้เป็นข้อมูลโค้ดสำหรับตั้งค่าพารามิเตอร์ที่สำคัญสำหรับแอตทริบิวต์ style โดยใช้ 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. ในการเพิ่มพารามิเตอร์ที่สำคัญเพื่อนำเสนอสตริงว่างของ style attribute pass

2. ในการเพิ่มพารามิเตอร์ที่สำคัญสำหรับแอตทริบิวต์ทั้งหมดที่มีอยู่อย่าส่งผ่านอะไร มันจะตั้งค่าแอตทริบิวต์ทั้งหมดเป็นสิ่งสำคัญ

นี่คือการดำเนินการจริง http://codepen.io/agaase/pen/nkvjr