Ghi đè! Phong cách quan trọng

Tiêu đề khá nhiều tổng hợp nó lên.

Biểu định kiểu bên ngoài có mã sau:

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

Tôi đã thử sử dụng:

element.style.display = "inline";

và

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

Nhưng không hoạt động. Có thể ghi đè một phong cách quan trọng bằng cách sử dụng javascript.

Đây là một phần mở rộng greasemonkey, nếu điều đó tạo ra sự khác biệt.

Tôi tin rằng cách duy nhất để làm điều này là thêm kiểu như một khai báo CSS mới với hậu tố '! Quan trọng'. Cách dễ nhất để làm điều này là nối phần tử <style> mới vào phần đầu của tài liệu:

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

Các quy tắc được thêm vào bằng phương pháp trên sẽ (nếu bạn sử dụng hậu tố! Quan trọng) ghi đè lên kiểu dáng đã đặt trước đó. Nếu bạn không sử dụng hậu tố thì hãy đảm bảo tính đến các khái niệm như ' tính đặc hiệu '.

Có một vài lớp lót đơn giản mà bạn có thể sử dụng để làm điều này.

1) Đặt thuộc tính "style" trên thành phần:

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

hoặc là...

2) Sửa đổi thuộc cssTexttính của styleđối tượng:

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

Hoặc là sẽ làm công việc.

===

BTW - nếu bạn muốn một công cụ hữu ích để thao tác !importantcác quy tắc trong các phần tử, tôi đã viết một plugin jQuery có tên là "quan trọng": http://github.com/premasagar/important

element.stylecó một setPropertyphương thức có thể ưu tiên như một tham số thứ ba:

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

Nó không hoạt động trong các IE cũ nhưng nó sẽ ổn trong các trình duyệt hiện tại.

Dựa trên câu trả lời tuyệt vời của @ Premasagar; nếu bạn không muốn xóa tất cả các kiểu nội tuyến khác, hãy sử dụng kiểu này

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

_{Không thể sử dụng removeProperty()vì nó sẽ không xóa !importantcác quy tắc trong Chrome.
Không thể sử dụng element.style[property] = ''vì nó chỉ chấp nhận camelCase trong FireFox.}

Phương pháp tốt hơn tôi vừa khám phá: cố gắng cụ thể hơn CSS trang với các bộ chọn của bạn. Tôi chỉ phải làm điều này ngày hôm nay, và nó hoạt động như một cơ duyên! Thông tin thêm về trang web W3C: http://www.w3.org/TR/CSS2/cascade.html#specificity

Nếu bạn muốn cập nhật / thêm kiểu đơn trong thuộc tính kiểu Phần tử DOM, bạn có thể sử dụng chức năng này:

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 được hỗ trợ cho tất cả các trình duyệt chính .

Ví dụ trường hợp sử dụng:

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

Đây là liên kết đến bản demo

Nếu tất cả những gì bạn đang làm là thêm css vào trang, thì tôi sẽ khuyên bạn nên sử dụng addon thời trang và viết kiểu người dùng thay vì tập lệnh người dùng, bởi vì kiểu người dùng hiệu quả và phù hợp hơn.

Xem trang này với thông tin về cách tạo kiểu người dùng

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

sử dụng tài sản ban đầu trong 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/

Một tùy chọn để ghi đè lớp CSS trong JavaScript là sử dụng ID cho thành phần kiểu để chúng tôi có thể cập nhật lớp 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)

Thay vì tiêm kiểu, nếu bạn tiêm một lớp (ví dụ: 'show') thông qua tập lệnh java, nó sẽ hoạt động. Nhưng ở đây bạn cần css như dưới đây. quy tắc css lớp được thêm vào phải nằm dưới quy tắc ban đầu của bạn.

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

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

Ở đó chúng ta có một khả năng khác để loại bỏ một giá trị thuộc tính khỏi CSS.

Giống như sử dụng phương pháp thay thế trong js. Nhưng bạn phải biết chính xác ID của kiểu hoặc bạn có thể viết vòng lặp for để phát hiện điều đó bằng cách (đếm kiểu trên trang, sau đó kiểm tra xem có bất kỳ giá trị nào trong số 'bao gồm' hoặc 'khớp' không !important. & Bạn có thể đếm cũng vậy - bao nhiêu chứa chúng, hoặc chỉ đơn giản là viết một phương thức thay thế toàn cầu [regapi: / str / gi])

Của tôi rất đơn giản, nhưng tôi đính kèm một jsBin, ví dụ:

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

Đầu tiên tôi đặt nền cơ thể trong CSS thành màu vàng !important, sau đó tôi ghi đè bằng JS cho darkPink.

Dưới đây là một đoạn mã để đặt tham số quan trọng cho thuộc tính style bằng 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,";"));
};

Cách sử dụng khá đơn giản. Chỉ cần vượt qua một đối tượng chứa tất cả các thuộc tính bạn muốn đặt là quan trọng.

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

Có hai lựa chọn bổ sung.

1. Chỉ cần thêm tham số quan trọng để trình bày thuộc tính style vượt qua chuỗi trống.

2.Để thêm param quan trọng cho tất cả các thuộc tính hiện tại không vượt qua bất cứ điều gì. Nó sẽ đặt tất cả các thuộc tính là quan trọng.

Đây là nó sống trong hành động. http://codepen.io/agaase/pen/nkvjr