!중요한 스타일 덮어쓰기

!중요한 스타일 덮어쓰기

제목이 거의 요약해줘요.

외부 스타일시트에는 다음 코드가 있습니다.

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

다음을 사용해 보았습니다.

element.style.display = "inline";

그리고.

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

둘 다 효과가 없어요.javascript를 사용하여 !important style을 덮어쓸 수 있습니까?

이것은 greasemonkey 확장의 경우로, 차이가 있는 경우입니다.

이를 위해 사용할 수 있는 몇 가지 간단한 단일 행이 있습니다.

1. 요소에 "스타일" 속성을 설정합니다.

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

아니면...

2. 「 」를합니다.cssText의 of의 style★★★★★★★★★★★★★★★★★★:

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

어느 쪽이든 좋다.

===

한 jQuery를 하기 위해 "important!important요소 규칙 : http://github.com/premasagar/important

===

Edit: 코멘트에서 공유되는 바와 같이 표준 CSSOM 인터페이스(CSS와 대화하기 위한 JavaScript용 API)는 다음 방법을 제공합니다.

element.style.setProperty(propertyName, value, priority);

예:

document.body.style.setProperty('background-color', 'red', 'important');

element.style 가지고 있다setProperty를 세 할 수 있는 : priority:

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

이전 IE에서는 동작하지 않았지만 현재 브라우저에서는 정상입니다.

이 방법을 사용하는 유일한 방법은 '!important' 접미사를 사용하여 스타일을 새로운 CSS 선언으로 추가하는 것이라고 생각합니다.가장 쉬운 방법은 문서 선두에 새로운 <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 suffix를 사용하는 경우) 이전에 설정된 다른 스타일링보다 우선됩니다.접미사를 사용하지 않을 경우 '특정성'과 같은 개념을 고려해야 합니다.

@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규칙을 지정합니다.
할 수 element.style[property] = ''파이어폭스 낙타 케이스}

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/

JavaScript에서 CSS 클래스를 덮어쓰는 옵션 중 하나는 스타일 요소의 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)

스타일을 삽입하는 대신 Java 스크립트를 통해 클래스(예: 'show')를 삽입하면 작동합니다.하지만 여기에서는 다음과 같은 css가 필요합니다.추가된 클래스 css 규칙은 원래 규칙보다 낮아야 합니다.

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

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

CSS에서 자산가치를 삭제할 수 있는 또 다른 가능성이 있습니다.

js의 치환 방법을 사용하는 것과 같습니다.단, 스타일의 ID를 정확하게 알아야 합니다.또는 For 루프를 작성하여 검출할 수 있습니다(페이지에서 스타일을 카운트하고, 그 중 하나라도 '포함' 또는 '일치'가 있는지 확인합니다).!importantvalue.&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;&amp;

저는 매우 단순하지만 jsBin을 첨부합니다. 예를 들어 다음과 같습니다.

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

먼저 CSS에서 본문 배경을 노란색으로 설정합니다.!important그리고 JS에 의해 dark Pink를 덮어썼습니다.

아래는 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. 이미 존재하는 스타일 속성에 중요한 파라미터를 추가하는 것만으로 빈 문자열을 전달합니다.

2. 존재하는 모든 속성에 대해 중요한 파라미터를 추가하려면 아무것도 전달하지 마십시오.모든 Atribute를 중요한 것으로 설정합니다.

라이브로 동작하고 있습니다.http://codepen.io/agaase/pen/nkvjr

언급URL : https://stackoverflow.com/questions/462537/overriding-important-style