중요한 스타일 재정의

중요한 스타일 재정의

---

제목은 거의 요약합니다.

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

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

나는 다음을 사용하려고 시도했다.

element.style.display = "inline";

과

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

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

차이가있는 경우 그리스 몽키 확장 용입니다.

---

스타일을 '! 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;}')

위의 방법으로 추가 된 규칙은 (중요한 접미사를 사용하는 경우) 이전에 설정 한 다른 스타일을 무시합니다. 접미사를 사용하지 않는 경우 ' 특정 성 ' 과 같은 개념 을 고려해야합니다.

---

이 작업을 수행하는 데 사용할 수있는 간단한 단일 라이너가 몇 개 있습니다.

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.stylesetProperty세 번째 매개 변수로 우선 순위를 가질 수 있는 방법이 있습니다.

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

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

---

당신이 사용할 수있는:

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

https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/setProperty

---

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

_{Can't use removeProperty() because it wont remove !important rules in Chrome.
Can't use element.style[property] = '' because it only accepts camelCase in FireFox.}

---

Better method I just discovered: try to be more specific than the page CSS with your selectors. I just had to do this today, and it works like a charm! More info on the W3C site: http://www.w3.org/TR/CSS2/cascade.html#specificity

---

If you want to update / add single style in DOM Element style attribute you can use this function:

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 is supported for all major browsers.

Use case example:

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

Here is link to demo

---

If all you are doing is adding css to the page, then I would suggest you use the Stylish addon, and write a user style instead of a user script, because a user style is more efficient and appropriate.

See this page with information on how to create a user style

---

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

use initial property in 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/

One option to override CSS class in JavaScript is using an ID for the style element so that we can update the CSS class

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)

---

Rather than injecting style, if you inject a class(for eg: 'show') through java script, it will work. But here you need css like below. the added class css rule should be below your original rule.

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

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

---

Below is a snippet of code to set the important parameter for the style attribute using 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,";"));
};

Usage is pretty simple.Just pass an object containing all the attributes you want to set as important.

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

There are two additional options.

1.To just add important parameter to already present style attribute pass empty string.

2.To add important param for all attributes present dont pass anything. It will set all attributes as important.

Here is it live in action. http://codepen.io/agaase/pen/nkvjr

참고URL : https://stackoverflow.com/questions/462537/overriding-important-style