! important 스타일 재정의

제목은 그것을 거의 요약합니다.

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

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

나는 사용을 시도했다 :

element.style.display = "inline";

과

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

그러나 둘 다 작동하지 않습니다. javascript를 사용하여! important 스타일을 재정의 할 수 있습니까?

차이가 있다면 이것은 greasemonkey 확장을위한 것입니다.

이 작업을 수행하는 유일한 방법은 '! 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 접미사를 사용하는 경우) 이전에 설정된 다른 스타일을 재정의합니다. 접미사를 사용하지 않는 경우 ' 특이성 ' 과 같은 개념 을 고려해야합니다.

이 작업을 수행하는 데 사용할 수있는 몇 가지 간단한 한 줄짜리가 있습니다.

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

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

또는...

2) 개체 의 cssText속성을 수정 style합니다.

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

어느 쪽이든 일을 할 것입니다.

===

BTW- !important요소에서 규칙 을 조작하는 데 유용한 도구를 원한다면 "important"라는 jQuery 플러그인을 작성했습니다. http://github.com/premasagar/important

element.stylesetProperty세 번째 매개 변수로 우선 순위를 가질 수 있는 메소드가 있습니다.

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

그것은 기존의 IE에서 작동하지 않았다 하지만 현재 브라우저에서 잘해야한다.

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

_{Chrome에서 규칙을 removeProperty()제거 하지 않으므로 사용할 수 없습니다 !important. FireFox에서 camelCase 만 허용하므로
사용할 수 없습니다 element.style[property] = ''.}

방금 발견 한 더 나은 방법 : 선택기를 사용하여 페이지 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를 추가하는 것뿐이라면 스타일리시 애드온을 사용하고 사용자 스크립트 대신 사용자 스타일을 작성하는 것이 좋습니다. 사용자 스타일이 더 효율적이고 적절하기 때문입니다.

사용자 스타일을 만드는 방법에 대한 정보는이 페이지를 참조하십시오.

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 클래스를 재정의하는 한 가지 옵션은 CSS 클래스를 업데이트 할 수 있도록 스타일 요소에 ID를 사용하는 것입니다.

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')를 삽입하면 작동합니다. 그러나 여기에는 아래와 같은 CSS가 필요합니다. 추가 된 클래스 CSS 규칙은 원래 규칙 아래에 있어야합니다.

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

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

CSS에서 속성 값을 제거 할 수있는 또 다른 가능성이 있습니다.

js에서 replace 메서드를 사용하는 것과 같습니다. 하지만 스타일의 ID를 정확히 알아야합니다. 아니면 for 루프를 작성하여이를 감지 할 수 있습니다 (페이지의 스타일을 계산 한 다음 !important값 이 '포함'또는 '일치'하는지 확인) . 또한-얼마나 많이 포함되어 있는지 또는 단순히 전역 [regexp : / str / gi] 대체 메소드를 작성하십시오)

내 것은 매우 간단하지만 예를 들어 jsBin을 첨부합니다.

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

먼저 CSS에서 노란색 !important에 대한 본문 배경을 설정 한 다음 darkPink에 대해 JS로 재정의했습니다.

다음은 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. 존재하는 모든 속성에 대한 중요한 매개 변수를 추가하려면 아무것도 전달하지 마십시오. 모든 속성을 중요하게 설정합니다.

여기에 실제로 실행됩니다. http://codepen.io/agaase/pen/nkvjr