.css ()를 사용하여! important를 적용하는 방법은 무엇입니까?

.css ()를 사용하여! important를 적용하는 방법은 무엇입니까?

---

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

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

이것은 아무것도 하지 않습니다 . 너비 스타일이 전혀 적용되지 않습니다. 덮어 쓰지 않고 그러한 스타일을 적용하는 jQuery 방식이 cssText있습니까 (먼저 파싱해야 함을 의미합니다)?

편집 : 스타일 인라인 !important으로 재정의하려는 스타일 시트가 !important있으므로 .width()외부 !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에서 너비를 변경하면 스타일 속성에 추가되므로 영향을받지 않는다는 것입니다.

적합성

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

---

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

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

.importantRule { width: 100px !important; }

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

또는 다음을 사용하여 attr():

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

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

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

위의 attr()접근 방식은 원래 style문자열 / 속성 을 유지하기 위해 약간 수정되었습니다 .

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

---

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

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

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

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

---

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

---

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

---

If it is not so relevant and since you're dealing with one element which is #elem, you can change its id to something else and style it as you wish...

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

And in your CSS:

#cheaterId { width: 100px;}

---

Instead of using the css() function try the addClass() function:

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

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

---

The easiest and best solution for this problem from me was to simply use addClass() instead of .css() or .attr().

For example:

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

And in your CSS file:

.importantClass {
    width: 100px !important;
}

---

FYI, it doesn't work because jQuery doesn't support it. There was a ticket filed on 2012 (#11173 $(elem).css("property", "value !important") fails) that was eventually closed as WONTFIX.

---

We need first to remove the previous style. I remove it using a regular expression. Here is an example for changing color:

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

---

An alternative way to append style in head:

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

This appends style after all your CSS files so it will have higher priority than other CSS files and will be applied.

---

May be it look's like this:

Cache

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

Set CSS

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

Remove CSS

node.style.removeProperty('width');
OR
node.style.width = '';

---

I think it works OK and can overwrite any other CSS before (this: DOM element):

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

---

Do it like this:

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

---

This solution will leave all the computed javascript and add the important tag into the element: You can do (Ex if you need to set the width with the important tag)

$('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

---

Three working examples

I had a similar situation, but I used .find() after struggling with .closest() for a long time with many variations.

The Example Code

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

Alternative

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

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

Working: http://jsfiddle.net/fx4mbp6c/

---

It may or may not be appropriate for your situation but you can use CSS selectors for a lot of these type of situations.

If, for example you wanted of the 3rd and 6th instances of .cssText to have a different width you could write:

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

Or:

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

---

I would assume you tried it without adding !important?

Inline CSS (which is how JavaScript adds styling) overrides the stylesheet CSS. I'm pretty sure that's the case even when the stylesheet CSS rule has !important.

Another question (maybe a stupid question but must be asked.): Is the element you are trying to work on display:block; or display:inline-block;?

Not knowing your expertise in CSS... inline elements don't always behave as you would expect.

---

We can use setProperty or cssText to add !important to a DOM element using JavaScript.

Example 1:

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

Example 2:

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

---

I also discovered that certain elements or add-on's (like Bootstrap) have some special class cases where they do not play well with !important or other work-arounds like .addClass/.removeClass, and thus you have to to toggle them on/off.

For example, if you use something like <table class="table-hover">the only way to successfully modify elements like colors of rows is to toggle the table-hover class on/off, like this

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

Hopefully this work-around will be helpful to someone! :)

---

I had the same problem trying to change a text color of a menu-item when "event". The best way I found when I had this same problem was:

First step: Create, in your CSS, a new class with this purpose, for example:

.colorw{ color: white !important;}

Last step: Apply this class using the addClass method as follows:

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

Problem solved.

---

The safest workaround to this is to add a class and then do the magic in CSS :-), addClass() and removeClass() should do the work.

---

https://jsfiddle.net/xk6Ut/256/

An alternative approach is dynamically creating and updating CSS class in JavaScript. To do that, we can use style element and need to employ the 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)

---

Another easy method to solve this issue adding the style attribute:

$('.selector').attr('style', 'width:500px !important');

참고URL : https://stackoverflow.com/questions/2655925/how-to-apply-important-using-css