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

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

답변

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

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

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

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

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 + ";";
  }
}

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