스타일을 적용하는 데 문제가 !important있습니다. 난 노력 했어:

$("#elem").css("width", "100px !important");

이것은 아무것도 하지 않는다 ; 너비 스타일이 적용되지 않습니다. 덮어 쓰지 않고 이러한 스타일을 적용하는 jQuery와 같은 방법이 cssText있습니까? (먼저 스타일 을 구문 분석해야한다는 의미입니다.)

편집 : 스타일 인라인 !important으로 재정의하려는 스타일 의 스타일 시트가 !important있으므로 .width()외부 !important스타일에 의해 재정의 되므로 사용 등이 작동하지 않습니다 .

또한 이전 값을 재정의하는 값 이 계산 되므로 다른 외부 스타일을 만들 수 없습니다.

이 문제는 jQuery가 !important속성을 이해하지 못하기 때문에 발생 하며 규칙을 적용하지 못합니다.

이 문제를 해결하고 다음을 통해 규칙을 참조하여 규칙을 적용 할 수 있습니다 addClass().

.importantRule { width: 100px !important; }

$('#elem').addClass('importantRule');

또는 사용하여 attr():

$('#elem').attr('style', 'width: 100px !important');

후자의 접근 방식은 이전에 설정된 인라인 스타일 규칙을 설정 해제합니다. 주의해서 사용하십시오.

물론 @Nick Craver의 방법이 더 쉽고 현명하다는 좋은 주장이 있습니다.

위의 attr()접근 방식은 원래 style문자열 / 속성 을 유지하기 위해 약간 수정되었으며 주석에서 falko 가 제안한대로 수정되었습니다 .

$('#elem').attr('style', function(i,s) { return (s || '') + 'width: 100px !important;' });

나는 진짜 해결책을 찾았다 고 생각한다. 새로운 기능으로 만들었습니다.

jQuery.style(name, value, priority);

당신은으로 값을 얻을하는 데 사용할 수 있습니다 .style('name')단지 같은 .css('name'),와의 CSSStyleDeclaration을 얻기 .style()도 설정 값을, 그리고 - 능력 '중요'로 우선 순위를 지정할 수 있습니다. 참조 이 .

데모

var div = $('someDiv');
console.log(div.style('color'));
div.style('color', 'red');
console.log(div.style('color'));
div.style('color', 'blue', 'important');
console.log(div.style('color'));
console.log(div.style().getPropertyPriority('color'));

출력은 다음과 같습니다.

null
red
blue
important

함수

(function($) {    
  if ($.fn.style) {
    return;
  }

  // Escape regex chars with \
  var escape = function(text) {
    return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
  };

  // For those who need them (< IE 9), add support for CSS functions
  var isStyleFuncSupported = !!CSSStyleDeclaration.prototype.getPropertyValue;
  if (!isStyleFuncSupported) {
    CSSStyleDeclaration.prototype.getPropertyValue = function(a) {
      return this.getAttribute(a);
    };
    CSSStyleDeclaration.prototype.setProperty = function(styleName, value, priority) {
      this.setAttribute(styleName, value);
      var priority = typeof priority != 'undefined' ? priority : '';
      if (priority != '') {
        // Add priority manually
        var rule = new RegExp(escape(styleName) + '\\s*:\\s*' + escape(value) +
            '(\\s*;)?', 'gmi');
        this.cssText =
            this.cssText.replace(rule, styleName + ': ' + value + ' !' + priority + ';');
      }
    };
    CSSStyleDeclaration.prototype.removeProperty = function(a) {
      return this.removeAttribute(a);
    };
    CSSStyleDeclaration.prototype.getPropertyPriority = function(styleName) {
      var rule = new RegExp(escape(styleName) + '\\s*:\\s*[^\\s]*\\s*!important(\\s*;)?',
          'gmi');
      return rule.test(this.cssText) ? 'important' : '';
    }
  }

  // The style function
  $.fn.style = function(styleName, value, priority) {
    // DOM node
    var node = this.get(0);
    // Ensure we have a DOM node
    if (typeof node == 'undefined') {
      return this;
    }
    // CSSStyleDeclaration
    var style = this.get(0).style;
    // Getter/Setter
    if (typeof styleName != 'undefined') {
      if (typeof value != 'undefined') {
        // Set style property
        priority = typeof priority != 'undefined' ? priority : '';
        style.setProperty(styleName, value, priority);
        return this;
      } else {
        // Get style property
        return style.getPropertyValue(styleName);
      }
    } else {
      // Get CSSStyleDeclaration
      return style;
    }
  };
})(jQuery);

CSS 값을 읽고 설정하는 방법에 대한 예는 이 내용을 참조하십시오 . 내 문제는 !important다른 테마 CSS와의 충돌을 피하기 위해 CSS에서 너비를 이미 설정 했지만 jQuery에서 너비를 변경하면 style 속성에 추가되므로 영향을 미치지 않습니다.

적합성

이 기사setProperty 에서는 이 기능을 사용하여 우선 순위를 설정 하기 위해 IE 9+ 및 기타 모든 브라우저가 지원된다고 말합니다. IE 8을 사용해 보았지만 실패했기 때문에 내 기능에서 지원을 작성했습니다 (위 참조). setProperty를 사용하여 다른 모든 브라우저에서 작동하지만 <IE 9에서 작동하려면 사용자 정의 코드가 필요합니다.

다음 .width()과 같이 직접 너비를 설정할 수 있습니다 .

$("#elem").width(100);

주석 업데이트 : 이 옵션도 있지만 요소의 모든 CSS를 대체하므로 더 실용적인지 확실하지 않습니다.

$('#elem').css('cssText', 'width: 100px !important');

const elem = $("#elem");
elem[0].style.removeAttribute('width');
elem[0].style.setProperty('width', '100px', 'important');

참고 : Chrome을 사용하면 다음과 같은 오류가 반환 될 수 있습니다.

elem [0] .style.removeAttribute는 함수가 아닙니다

문제 해결 .removeProperty과 같은 기능 을 사용하도록 회선 변경elem[0].style.removeProperty('width');

David Thomas의 답변 은을 사용하는 방법을 설명 $('#elem').attr('style', …)하지만이를 사용하면 style속성 에서 이전에 설정 한 스타일이 삭제된다고 경고 합니다. attr()그 문제없이 사용하는 방법은 다음과 같습니다 .

var $elem = $('#elem');
$elem.attr('style', $elem.attr('style') + '; ' + 'width: 100px !important');

기능으로서 :

function addStyleAttribute($element, styleAttribute) {
    $element.attr('style', $element.attr('style') + '; ' + styleAttribute);
}

addStyleAttribute($('#elem'), 'width: 100px !important');

다음은 JS Bin 데모 입니다.

다른 답변을 읽고 실험 한 후에 이것이 나에게 효과적입니다.

$(".selector")[0].style.setProperty( 'style', 'value', 'important' );

그러나 IE 8 이하에서는 작동하지 않습니다.

당신은 이것을 할 수 있습니다 :

$("#elem").css("cssText", "width: 100px !important;");

"cssText"를 속성 이름으로 사용하고 CSS에 값으로 추가 할 항목을 사용하십시오.

두 가지 방법으로이를 달성 할 수 있습니다.

$("#elem").prop("style", "width: 100px !important"); // this is not supported in chrome
$("#elem").attr("style", "width: 100px !important");

@AramKocharyan의 대답의 복잡성으로 갈 필요가 없으며 스타일 태그를 동적으로 삽입 할 필요가 없습니다.

스타일을 덮어 쓰지만 구문 분석 할 필요가 없습니다. 왜 그런가요?

// Accepts the hyphenated versions (i.e. not 'cssFloat')
function 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] = ''.}

jQuery를 사용하면이 작업을 더 짧게 만들 수 있지만이 바닐라 기능은 최신 브라우저, Internet Explorer 8 등에서 실행됩니다.

이 문제가 발생한 후 내가 한 일은 다음과 같습니다.

var origStyleContent = jQuery('#logo-example').attr('style');
jQuery('#logo-example').attr('style', origStyleContent + ';width:150px !important');

이 솔루션은 이전 스타일을 재정의하지 않고 필요한 스타일 만 적용합니다.

var heightStyle = "height: 500px !important";
if ($("foo").attr('style')) {
  $("foo").attr('style', heightStyle + $("foo").attr('style').replace(/^height: [-,!,0-9,a-z, A-Z, ]*;/,''));
else {
  $("foo").attr('style', heightStyle);
}

그것이 관련성이 없으며 하나의 요소를 다루기 #elem때문에 id를 다른 것으로 변경하고 원하는대로 스타일을 지정할 수 있습니다 ...

$('#elem').attr('id', 'cheaterId');

그리고 당신의 CSS에서 :

#cheaterId { width: 100px;}

css()함수 를 사용하는 대신 함수를 시도하십시오 addClass().

  <script>
  $(document).ready(function() {
    $("#example").addClass("exampleClass");
  });
  </script>

  <style>
  .exampleClass{
    width:100% !important;
    height:100% !important;
  }
  </style>

이 문제에 대한 가장 쉽고 최상의 해결책은 .css () 또는 .attr () 대신 addClass ()를 사용하는 것입니다.

예를 들면 다음과 같습니다.

$('#elem').addClass('importantClass');

그리고 CSS 파일에서 :

.importantClass {
    width: 100px !important;
}

참고로, jQuery가 지원하지 않기 때문에 작동하지 않습니다. 2012 년에 제출 된 티켓 ( # 11173 $ (elem) .css ( "property", "value! important") 실패 )이 결국 WONTFIX로 마감되었습니다.

이러한 답변은 대부분 구식이며 IE7 지원은 문제가되지 않습니다.

IE11 + 및 모든 최신 브라우저 를 지원 하는 가장 좋은 방법은 다음 과 같습니다.

const $elem = $("#elem");
$elem[0].style.setProperty('width', '100px', 'important');

또는 원하는 경우이 작업을 수행하는 작은 jQuery 플러그인을 만들 수 있습니다. 이 플러그인 css()은 지원하는 매개 변수에서 jQuery의 자체 메소드 와 밀접하게 일치 합니다.

/**
 * Sets a CSS style on the selected element(s) with !important priority.
 * This supports camelCased CSS style property names and calling with an object 
 * like the jQuery `css()` method. 
 * Unlike jQuery's css() this does NOT work as a getter.
 * 
 * @param {string|Object<string, string>} name
 * @param {string|undefined} value
 */   
jQuery.fn.cssImportant = function(name, value) {
  const $this = this;
  const applyStyles = (n, v) => {
    // Convert style name from camelCase to dashed-case.
    const dashedName = n.replace(/(.)([A-Z])(.)/g, (str, m1, upper, m2) => {
      return m1 + "-" + upper.toLowerCase() + m2;
    }); 
    // Loop over each element in the selector and set the styles.
    $this.each(function(){
      this.style.setProperty(dashedName, v, 'important');
    });
  };
  // If called with the first parameter that is an object,
  // Loop over the entries in the object and apply those styles. 
  if(jQuery.isPlainObject(name)){
    for(const [n, v] of Object.entries(name)){
       applyStyles(n, v);
    }
  } else {
    // Otherwise called with style name and value.
    applyStyles(name, value);
  }
  // This is required for making jQuery plugin calls chainable.
  return $this;
};

// Call the new plugin:
$('#elem').cssImportant('height', '100px');

// Call with an object and camelCased style names:
$('#another').cssImportant({backgroundColor: 'salmon', display: 'block'});

// Call on multiple items:
$('.item, #foo, #bar').cssImportant('color', 'red');

예제 jsfiddle here .

먼저 이전 스타일을 제거해야합니다. 정규식을 사용하여 제거합니다. 색상을 변경하는 예는 다음과 같습니다.

var SetCssColorImportant = function (jDom, color) {
       var style = jDom.attr('style');
       style = style.replace(/color: .* !important;/g, '');
       jDom.css('cssText', 'color: ' + color + ' !important;' + style); }

머리에 스타일을 추가하는 다른 방법 :

$('head').append('<style> #elm{width:150px !important} </style>');

이렇게하면 모든 CSS 파일 뒤에 스타일이 추가되어 다른 CSS 파일보다 우선 순위가 높아 적용됩니다.

다음과 같이 보일 수 있습니다.

은닉처

var node = $ ( '. selector') [0];
또는
var node = document.querySelector ( '. selector');

CSS 설정

node.style.setProperty ( 'width', '100px', 'important');

CSS를 제거

node.style.removeProperty ( 'width');
또는
node.style.width = '';

나는 그것이 잘 작동하고 다른 CSS를 덮어 쓸 수 있다고 생각합니다 (이 : DOM 요소).

this.setAttribute('style', 'padding:2px !important');

다음과 같이하십시오 :

$("#elem").get(0).style.width= "100px!important";

이 솔루션은 모든 계산 된 자바 스크립트를 남기고 요소에 중요한 태그를 추가합니다 : 할 수 있습니다 (중요한 태그로 너비를 설정 해야하는 경우 Ex)

$('exampleDiv').css('width', '');
//This will remove the width of the item
var styles = $('exampleDiv').attr('style');
//This will contain all styles in your item
//ex: height:auto; display:block;
styles += 'width: 200px !important;'
//This will add the width to the previous styles
//ex: height:auto; display:block; width: 200px !important;
$('exampleDiv').attr('style', styles);
//This will add all previous styles to your item

세 가지 작업 예

비슷한 상황이 있었지만 오랫동안 .closest ()로 어려움을 겪고 나서 .find ()를 사용했습니다.

예제 코드

// Allows contain functions to work, ignores case sensitivity

jQuery.expr[':'].contains = function(obj, index, meta, stack) {
    result = false;
    theList = meta[3].split("','");
    var contents = (obj.textContent || obj.innerText || jQuery(obj).text() || '')
    for (x=0; x<theList.length; x++) {
        if (contents.toLowerCase().indexOf(theList[x].toLowerCase()) >= 0) {
            return true;
        }
    }
    return false;
};

$(document).ready(function() {
    var refreshId = setInterval( function() {
        $("#out:contains('foo', 'test456')").find(".inner").css('width', '50px', 'important');
    }, 1000); // Rescans every 1000 ms
});

대안

$('.inner').each(function () {
    this.style.setProperty('height', '50px', 'important');
});

$('#out').find('.inner').css({ 'height': '50px'});

작업 : http://jsfiddle.net/fx4mbp6c/

상황에 따라 적절하지 않을 수도 있지만 이러한 유형의 상황에 CSS 선택기를 사용할 수 있습니다.

예를 들어 .cssText의 3 번째와 6 번째 인스턴스의 너비가 다른 경우 다음과 같이 작성할 수 있습니다.

.cssText:nth-of-type(3), .cssText:nth-of-type(6) {width:100px !important;}

또는:

.container:nth-of-type(3).cssText, .container:nth-of-type(6).cssText {width:100px !important;}

추가하지 않고 시도했다고 가정합니다. !important 합니까?

인라인 CSS (JavaScript가 스타일을 추가하는 방법)는 스타일 시트 CSS를 재정의합니다. 스타일 시트 CSS 규칙이있는 경우에도 그럴 것입니다.!important 입니다.

또 다른 질문 (어리석은 질문 일 수도 있지만 질문해야합니다.) : 작업하려는 요소 display:block;또는display:inline-block; 입니까?

CSS에 대한 전문 지식을 알지 못하면 인라인 요소가 항상 예상대로 작동하지는 않습니다.

setProperty 또는 cssText를 사용하여 추가 할 수 있습니다 !important 사용하여 JavaScript를 사용하여 DOM 요소 .

예 1 :

elem.style.setProperty ("color", "green", "important");

예 2 :

elem.style.cssText='color: red !important;'

또한 특정 요소 또는 추가 기능 (예 : Bootstrap)에는 잘 !important작동 하지 않는 특수 클래스 사례가 있거나 다른 해결 방법이 있음을 발견했습니다..addClass/.removeClass 있으므로 해당 요소를 켜거나 꺼야한다는 것을 알았습니다.

예를 들어, <table class="table-hover">행의 색상과 같은 요소를 성공적으로 수정하는 유일한 방법을 사용하는 경우 table-hover클래스를 켜거나 끄는 것입니다.

$(your_element).closest("table").toggleClass("table-hover");

이 해결 방법이 누군가에게 도움이되기를 바랍니다. :)

"event"일 때 메뉴 항목의 텍스트 색상을 변경하려고 시도하는 것과 동일한 문제가 발생했습니다. 이 같은 문제가 발생했을 때 가장 좋은 방법은 다음과 같습니다.

첫 번째 단계 : CSS에서 이러한 목적으로 새 클래스를 작성하십시오. 예를 들면 다음과 같습니다.

.colorw{ color: white !important;}

마지막 단계 : 다음과 같이 addClass 메소드를 사용하여이 클래스를 적용하십시오.

$('.menu-item>a').addClass('colorw');

문제 해결됨.

이에 대한 가장 안전한 해결 방법은 클래스를 추가하고 CSS에서 마법을 :-)하는 것입니다 addClass()및 removeClass()작업을 수행해야합니다.

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)